[网络协议] js：http-vue-loader从浏览器直接引入vue文件

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> js：http-vue-loader从浏览器直接引入vue文件 -> 正文阅读

[网络协议]js：http-vue-loader从浏览器直接引入vue文件

doc

github: https://github.com/FranckFreiburger/http-vue-loader

index.html

<!doctype html>
<html lang="en">

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
  <script src="https://unpkg.com/http-vue-loader"></script>
</head>

<body>
  <div id="app">
    <my-component></my-component>
  </div>

  <script type="text/javascript">

    new Vue({
      el: '#app',
      components: {
        'my-component': httpVueLoader('my-component.vue')
      }
    });
  </script>
</body>

</html>

my-component.vue

<template>
  <div class="hello">
    Hello {{who}}
  </div>
</template>

<script>
// 不支持 import
module.exports = {
  data: function () {
    return {
      who: 'world',
    };
  },
  components: {},
};
</script>

<style>
.hello {
  background-color: #ffe;
}
</style>

使用 sass

<!-- 可选，使用sass -->
<script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/sass.js/0.9.9/sass.worker.min.js"></script>
 
<script type="text/javascript">
// 可选, 使用scss
httpVueLoader.langProcessor.scss = function (scssText) {
  return new Promise(function (resolve, reject) {
    Sass.compile(scssText, function (result) {
      if (result.status === 0)
        resolve(result.text)
      else
        reject(result)
    });
  });
}
</script>

使用 less

<!-- 使用 less -->
<script src="https://cdn.jsdelivr.net/npm/less@4.1.1/dist/less.min.js"></script>

<script type="text/javascript">
httpVueLoader.langProcessor.less = function (lessText) {
  return new Promise(function (resolve, reject) {
    less.render(lessText, {}, function (err, css) {
      if (err) {
        reject(err)
      } else {
        resolve(css.css);
      }
    })
  })
}
</script>