预览模式: 普通 | 列表

目前利用<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代码
  1. <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js"></script>  
  2. <script src="https://unpkg.com/http-vue-loader"></script>  
  3. <script src="./js/common.js"></script>  
 

Javascript代码
  1. //common.js  
  2. function less_init() {  
  3.     httpVueLoader.langProcessor.less = function (lessText) {  
  4.         return new Promise(function (resolve, reject) {  
  5.             less.render(lessText, {}, function (err, css) {  
  6.                 if (err) {  
  7.                     reject(err)  
  8.                 } else {  
  9.                     resolve(css.css);  
  10.                 }  
  11.             })  
  12.         })  
  13.     }  
  14. }  
  15.   
  16. less_init()  
  17.  
 

注意配置次序,less解释器必须在http-vue-loader初始化之后。

另外,官网上已经放出了最新的vue3-sfc-loader,我试用了一下,可支持vue3,也可以支持多层import语法。功能强大。
不过这种用法,不就跟vue-cli一样了么?不明白收益点在哪。
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 29288