长沙地区前端编程技术群： 181020572 站长！QQ：258754，，手机：18975141930
http-vue-loader插件让你无需使用webpack也能尝鲜.vue单文件组件
作者:admin 日期:2018-03-25目前利用<script>方式，不使用webpack的开发人员还很多，我之前一直不知道，可以绕过webpack，直接尝鲜.vue的单文件组件方式，直到发现了这个组件。目前我已经在多个项目中使用。
这个插件的用法在百度上基本搜不到。具体使用方式可以看这个中文文档：
https://kuro.tw/posts/2017/07/11/%E4%B8%8D%E9%9C%80%E7%B7%A8%E8%AD%AF%E4%B9%9F%E8%83%BD%E8%BC%89%E5%85%A5-vue-%E5%85%83%E4%BB%B6%E6%AA%94-%E4%BD%BF%E7%94%A8-http-vue-loader/
也可以直接看github官网文档：
https://github.com/FranckFreiburger/http-vue-loader
另外，我按照官网方法配置scss语法支持，但我一直没有成功，老是报红色错误，在官网issue上看了，有人碰上同样错误，没有解决。
但我测试了LESS功能，是可以的，所以我就使用LESS算了。配置如下：
XML/HTML代码
- <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js"></script>
- <script src="https://unpkg.com/http-vue-loader"></script>
- <script src="./js/common.js"></script>
Javascript代码
- //common.js
- function less_init() {
- 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);
- }
- })
- })
- }
- }
- less_init()
注意配置次序,less解释器必须在http-vue-loader初始化之后。
另外，官网上已经放出了最新的vue3-sfc-loader，我试用了一下，可支持vue3，也可以支持多层import语法。功能强大。
不过这种用法，不就跟vue-cli一样了么？不明白收益点在哪。
