http-vue-loader插件让你无需使用webpack也能尝鲜.vue单文件组件

目前利用<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一样了么?不明白收益点在哪。


[本日志由 admin 于 2022-01-23 09:40 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 2 | 引用: 0 | 查看次数: 23733
234
回复回复234[2019-08-12 04:17 PM | | | del | 取消审核]
<script>alert(1)</script>
2222
回复回复2222[2019-08-12 04:16 PM | | | del | 通过审核]
[未审核评论,仅管理员可见]
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭