Vue + Webpack + Vue-loader 系列教程
2016-10-14 16:36
856 查看
http://www.cnblogs.com/terry01/p/5953464.html
介绍
Vue-loader 是什么?
vue-loader是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块。
vue-loader提供了一些非常酷炫的特性:
ES2015默认可用;
在每个 Vue 组件内支持其他的 Webpack 加载器,如用于
<style>的 SASS 和用于
<template>的 Jade。
把
<style>和
<template>内引用的静态资源作为模块依赖项对待,并用Webpack 加载器处理。
对每个组件模拟有作用域的CSS。
开发阶段支持组件的热加载。
简单来说,webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。
Webpack 是什么?
如果你熟悉 Webpack 那就跳过这部分吧,但对于那些新手们,请看下这个简单介绍吧:Webpack 是一个模块打包工具。在开发中,它把一堆文件中每个都作为一个模块处理,找出它们间的依赖关系,并打包成待发布的静态资源。
列举一个基本例子,设想我们有一堆的 CommonJS 的引用。它们是不能在浏览器直接运行,所以需要把它们 捆绑成
<script>标记内的单一文件。Webpack 就能按照
require()调用的依赖关系为我们做到这点。
实际上,Webpack 能做的更多,通过
"loaders"我们能让 Webpack 按照我们想要的任何方式打包输出。例如:
编译 ES2015、CoffeeScript 或 TypeScript 模块成 ES5 CommonJS 的模块;
编译之前,可以通过 linter 校验源代码。
编译 Jade 模板成 HTML 并内联 JavaScript 字符串。
编译 SASS 文件成 CSS,然后把生成的CSS插入到
<style>标签内,然后再转译成 JavaScript 代码段。
处理在 HTML 或 CSS 文件中引用的图片文件,根据配置路径把它们移动到任意位置,根据 MD5 hash 命名。
如果你学会了Webpack,就会知道它有多么强大,它非常显著地改善你前端开发的效率。它主要的缺点是配置方式有点麻烦,但是有了我这份使用指南,那使用
Webpack + Vue + vue-loader的时候,基本上就扫清了大多数障碍了。
Vue 组件规格
*.vue文件是用户用 HTML-like 的语法编写的 Vue 组件。每个
*.vue文件都包括三部分
<template>,
<script>和
<style>:
<template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>
vue-loader解析文件,提取每个语言块,让他们通过需要的其他 loaders ,最后组装起来,放回 CommonJS 的模块,此模块的
module.exports就是个 Vue.js 组件对象。
vue-loader默认用没有用语言编译器,想CSS 预编译和HTML模板编译语言等,如果想用这些功能,需要设置
lang属性的来实现。例如,你可以在组件的样式中这样用 SASS :
<style lang="sass"> /* 编写 SASS! */ </style>
更多细节查看 [使用预编译器]。
语言块
<template>
默认语言:html。
每个
*.vue文件几乎都包含一个
<template>块。
<template>内的内容字符串会被提取出来,用来编译进 Vue 组件内的
template选项。
<script>
默认语言:js(默认ES2015也会通过Babel支持)。
每个
*.vue文件几乎都包含一个
<script>块。
脚本就像在CommonJS的环境中一样被执行(就像通过WebPACK中捆绑一个正常的.js模块)。就是说你可以
require()其他的依赖项。由于默认支持 ES2015 ,你也可以用
import和
export语法。
该脚本必须导出一个 Vue.js 组件选项对象,也支持导出一个用
Vue.extend()创建的扩展构造函数,但首先是导出普通对象。
<style>
默认语言:css。
每个
*.vue文件支持多个
<style>标签。
默认,会通过
style-loader把内容提取并加载到文档的
<head>内的
<style>标签内。这也是可以[通过配置 Webpack 使组件内所有样式提取到一个单一的CSS文件]。
Src Imports
如果你喜欢把你的*.vue组件拆分成多个文件,那么你可以用
src属性导入外部文件,代码如下:
<template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
需要注意的是
src导入要遵循和 CommonJS 的
require()调用一样的路径解析规则,这就是说你需要用以
./开头的相对路径,并且你可以直接从已安装的 NPM 包内导入资源,例如:
<!-- 从已安装的 "todomvc-app-css" NPM 包内导入文件 --> <style src="todomvc-app-css/index.css">
语法高亮显示
开发中的第一件事,你可能想让*.vue组件能高亮显示。现阶段,在 Sublime Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把
*.vue文件当成普通的 HTML 文件一样。
注释
在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade 等)。在文件最顶部注释的时候用HTML的注释语法:<!— 在这里写注释的内容 -->。
项目设置
语法高亮
开发中的第一件事,你可能想让*.vue组件能高亮显示。现阶段,在 Sublime Text , Atom , Vim , Visual Studio Code , Brackets ,和 JetBrains products (WebStorm,PhpStorm,等)都有支持语法高亮显示的插件。如果在 Vue 组件内没有使用任何预编译器,那么编辑器就把
*.vue文件当成普通的 HTML 文件一样。
使用 vue-cli
创建项目的时候推荐使用脚手架工具,可以用 vue-loader和
vue-cli,命令行如下:
npm install -g vue-cli vue init webpack-simple hello-vue cd hello-vue npm install npm run dev # 一切就绪!
ES2015
当vue-loader检测到
babel-loader或者
buble-loader在项目中存在的时候,将会用它们去处理所有
*.vue文件的
<script>部分,所以我们就可以在 Vue 组件中用 ES2015 。 如果你还不熟悉这个新语言的话,最好去学一下:
Babel - Learn ES2015
ES6 Features
Exploring ES6 (book)
这里是一个引用其他 Vue 组件的典型模式,
<script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB } } </script>
在这里用的就是 ES2015 精简的语法定义个子组件。
{ ComponentA }是指
{ ComponentA: ComponentA }。Vue会被自动转为
component-a, 所以你就能在模板中引入组件
<component-a>。
转译正常的 .js
文件
由于 vue-loader只能处理
*.vue文件,你需要在配置文件中告诉 Webpack 用
babel-loader或者
buble-loader。这点,可以用项目脚手架工具
vue-cli。
用 .babelrc
文件来配置 Babel
.babelrc可以控制
babel-loader,并推荐这种方式来配置 Babel 预设插件。
Scoped CSS
当<style>标签有
scoped属性的时候,它的 CSS 就只能作用于当前的组件。这就像样式被封装在 Shadow DOM 内。这是用 PostCSS 转译实现的。如下:
<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>
转换成:
<style> .example[_v-f3f3eg9] { color: red; } </style> <template> <div class="example" _v-f3f3eg9>hi</div> </template>
注意
在同一组件内,你能同时用有作用域和无作用域的样式:<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
父组件的有作用域的CSS和子组件的有作用域的CSS将同时影响子组件。
有作用域的样式对其他部分没有影响。
有作用域限定的样式不排除类的需要. 由于浏览器渲染方式支持多种不同的CSS选择器,加了作用域的
p { color: red }会慢好多倍 (即,和属性选择器组合时候的时候)。如果你用类或者id选择器,比如
.example { color: red },你就能消除性能损失。这里有个练习场 ,你可以比较测试下其中的差异。
在递归组件中小心后代选择器! 对于 CSS 规则的选择器 .a .b
,如果匹配 .a
的元素内包含一个递归子组件,那么子组件中所有包含 .b
的元素都会被匹配到。
PostCSS
任何通过vue-loader处理过的 CSS 都再用 PostCSS重写有作用域限制的 CSS 部分。你也能添加自定义的 PostCSS 插件处理,例如, autoprefixer 或 CSSNext。
在 Webpack 1.x 中的用法如下:
// webpack.config.js module.exports = { // 其他配置... vue: { // 使用用户自定义的 postcss 插件 postcss: [require('postcss-cssnext')()] } }
Webpack 2.x 中的用法:
// webpack.config.js module.exports = { // 其他配置... plugins: [ new webpack.LoaderOptionsPlugin({ vue: { // 使用用户自定义插件 postcss: [require('postcss-cssnext')()] } }) ] }
除了接受插件的数组,
postcss选项也接受:
返回值是插件数组的方法;
包含被传递到PostCSS处理器选项的对象。当你的项目依赖于自定义解析器或编译器的时候,这就会很有用。
postcss: { plugins: [...], // list of plugins options: { parser: sugarss // use sugarss parser } }
热加载
“热加载” 不只是当你修改了文件简单地重新加载下页面。当启用了热加载功能,编写完*.vue文件后,组件的所有的实例对象被替换,而页面并没有重新加载。仍然保持应用原有的状态。这在你调整模板或修改组件样式的时候,大大改善了开发体验。
当使用项目的脚手架工具
vue-cli,热加载自动启用。
相关文章推荐
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
- Vue + Webpack + Vue-loader学习教程之功能介绍篇
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- Vue + Webpack + Vue-loader学习教程之相关配置篇
- webpack+vue.js快速入门教程
- Vue + Webpack + Vue-loader 功能介绍
- 使用webpack+vue+less开发,使用less-loader,配置全局less变量
- vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)
- vue24-webpack+vue-loader
- vue全家桶系列3webpack遇见vue-loader
- Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader
- webpack入门教程之初识loader(二)
- Webpack中css-loader和less-loader的使用教程
- Vue + Webpack + Vue-loader 1