vue-loader教程介绍_vue.js_脚本之家

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

Vue-loader 是什么?

vue-loader功能

vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。

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

vue-loader 提供了一些非常酷炫的特性:

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

ES2015默认可用; 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于

vue组件格式

vue-loader 解析文件,提取每个语言块,让他们通过需要的其他 loaders
,最后组装起来,放回 CommonJS 的模块,此模块的 module.exports 就是个
Vue.js 组件对象。

.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个
.vue 文件包含三种类型的顶级语言块 ,

vue-loader 默认用没有用语言编译器,想CSS
预编译和HTML模板编译语言等,如果想用这些功能,需要设置 lang
属性的来实现。例如,你可以在组件的样式中这样用 SASS :

This could be e.g. documentation for the component.

 /* 编写 SASS! */

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

更多细节查看 [使用预编译器]。

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

语言块

 /* write SASS! */

默认语言:html 。 每个 *.vue 文件几乎都包含一个 块。
内的内容字符串会被提取出来,用来编译进 Vue 组件内的 template 选项。
默认语言:js。 每个 *.vue 文件几乎都包含一个

Src 导入

需要注意的是 src 导入要遵循和 CommonJS 的 require()
调用一样的路径解析规则,这就是说你需要用以 ./
开头的相对路径,并且你可以直接从已安装的 NPM 包内导入资源,例如:

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

语法高亮显示

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

开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime
Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains
products 都有支持语法高亮显示的插件。如果在 Vue
组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML
文件一样。

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

注释

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

在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade
等)。在文件最顶部注释的时候用HTML的注释语法: 。

项目设置

语法高亮

开发中的第一件事,你可能想让 *.vue 组件能高亮显示。现阶段,在 Sublime
Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains
products 都有支持语法高亮显示的插件。如果在 Vue
组件内没有使用任何预编译器,那么编辑器就把 *.vue 文件当成普通的 HTML
文件一样。

使用 vue-cli

创建项目的时候推荐使用脚手架工具,可以用 vue-loader 和
vue-cli,命令行如下:

npm install -g vue-clivue init webpack-simple hello-vuecd hello-vuenpm installnpm run dev # 一切就绪!

ES2015

当 vue-loader 检测到 babel-loader 或者 buble-loader
在项目中存在的时候,将会用它们去处理所有 *.vue 文件的

在这里用的就是 ES2015 精简的语法定义个子组件。{ ComponentA } 是指 {
ComponentA: ComponentA } 。Vue会被自动转为 component-a,
所以你就能在模板中引入组件 。

转译正常的 .js 文件