虚拟装载机教程简介

第一次用webpack vue的时候，在vue里面看到了各种语法，包括导入、导出、html、css的编写方法，能够根据葫芦画实现各种功能。然而，直到我理解了vue-loader，我才明白为什么我可以这样写。

Vue-loader功能

如图所示，webpack的功能是将左边用户编写的代码(只要有对应的加载器，就可以使用任何适合自己习惯的编写方法)转换成右边浏览器可以识别的js。

vue加载器告诉webpack如何将vue格式的文件转换成js。

Vue组件格式

那个。Vue文件是一种自定义的文件类型，它用类似HTML的语法描述一个vue组件。每一个。vue文件包含三种顶级语言块：模板、脚本和样式。还可以添加可选的自定义块：

template div class='示例“{ msg } }/div/templatescriptexport default { data(){ return { msg : ' Hello world！'} } }/script style . example { color : red；}/style custom1例如，这可能是组件的文档。/custom1 vue-loader将解析文件，提取每个语言块，必要时通过其他加载器进行处理，最后将它们组装成一个CommonJS模块，module.exports将产生一个Vue.js组件对象。

Vue-loader通过设置语言块的lang属性，支持使用非默认语言，如CSS预处理器和预编译HTML模板语言。例如，您可以使用SASS语法编写样式，如下所示：

style lang='sass' /*写sass！*//styleSrc导入

如果你想分开你的。vue文件导入多个文件，可以通过src属性导入外部文件：

模板src=' http:/template . html/template style src=' http 3360。/style . CSS/style script src=' http :/script . js//script需要注意的是，src导入遵循与require()相同的规则，这意味着您的相对路径需要从。/，你也是

！-从已安装的“todomvc-app-CSS”NPM软件包导入文件-样式src=“http : todomvc-app-CSS/index . CSS”自定义块也支持src导入，例如：

单元测试src=' http:/unit-test . js//unit-test，这就是本文的全部内容。希望对大家的学习有帮助，支持我们。