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>