vue-loader教程介绍

　　

在最初使用webpack + vue时,看到vue里面各种语法,包括进口,出口,html和css的写作方式,我都能依葫芦画瓢地实现各种功能,但是为什么能这样写,一直不太理解,直到我了解了vue-loader。

　　

<强> vue-loader功能

　　

如图,webpack的功能就是将左侧用户编写的代码(只要有相应的装载机,可以使用任何符合自己习惯的编写方式)转换成右侧浏览器能识别的js。
　　

　　

vue-loader就是告诉webpack如何将vue格式的文件转换成js。

　　

vue-loader教程介绍

　　

<强> vue组件格式

　　

。vue文件是一个自定义的文件类型,用类HTML语法描述一个vue组件。每个.vue文件包含三种类型的顶级语言块& lt; template>, & lt; script>和& lt; style>,还允许添加可选的自定义块:

　　 　　 　　& lt; template> 　　& lt; div类=袄印痹趝{味精}}& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　数据(){ 　　返回{ 　　味精:“Hello world !” 　　} 　　} 　　} 　　& lt;/script> 　　& lt; style> 　　.example { 　　颜色:红色; 　　} 　　& lt;/style> 　　& lt; custom1> 　　这可能是如文档组件。 　　& lt;/custom1> 　　之前 　　 　　

vue-loader会解析文件,提取每个语言块,如有必要会通过其它加载器处理,最后将他们组装成一个CommonJS模块,模块。出口出一个Vue。js组件对象。
　　

　　

vue-loader支持使用非默认语言,比如CSS预处理器,预编译的HTML模版语言,通过设置语言块的朗属性,例如,你可以像下面这样使用SASS语法编写样式:

　　 　　 　　& lt;风格lang=叭埂北?/*写SASS !*/& lt;/style> 　　 　　

<强> Src导入

　　

如果喜欢分隔你的.vue文件到多个文件中,你可以通过src属性导入外部文件:

　　 　　 　　& lt;模板src=" https://www.yisu.com/zixun/template.html "祝辞& lt;/template> 　　& lt;风格src=" https://www.yisu.com/zixun/style.css "祝辞& lt;/style> 　　& lt;脚本src=" https://www.yisu.com/zixun/script.js "祝辞& lt;/script> 　　之前 　　 　　

需要注意的是src导入遵循和需要()一样的规则,这意味着你相对路径需要以。/开始,你还可以从NPM包中直接导入资源,例如:

　　 　　 　　& lt; !——从“todomvc-app-css”npm安装导入一个文件包,比; 　　& lt;风格src=" https://www.yisu.com/zixun/todomvc-app-css/index.css "在 　　 　　

在自定义块上同样支持src导入,例如:

　　 　　 　　& lt;单元测试src=" https://www.yisu.com/zixun/unit-test.js "比; 　　& lt;/unit-test> 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

vue-loader教程介绍