Vue + Webpack + Vue-loader学习教程之功能介绍篇

Vue 2018-12-31

Vue-loader 是什么？

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

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

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

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

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

rush:xhtml;">

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

转译正常的 .js 文件

由于 vue-loader 只能处理 *.vue 文件，你需要在配置文件中告诉 Webpack 用 babel-loader 或者 buble-loader 。这点，可以用项目脚手架工具 vue-cli 。

用 .babelrc 文件来配置 Babel

.babelrc 可以控制 babel-loader ，并推荐这种方式来配置 Babel 预设插件。

Scoped CSS

当

转换成：

rush:xhtml;">

注意

在同一组件内，你能同时用有作用域和无作用域的样式：

rush:xhtml;">

父组件的有作用域的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 中的用法如下：

rush:js;"> // webpack.config.js module.exports = { // 其他配置... vue: { // 使用用户自定义的 postcss 插件 postcss: [require('postcss-cssnext')()] } }

Webpack 2.x 中的用法:

rush:js;"> // webpack.config.js module.exports = { // 其他配置... plugins: [ new webpack.LoaderOptionsPlugin({ vue: { // 使用用户自定义插件 postcss: [require('postcss-cssnext')()] } }) ] }

除了接受插件的数组，postcss 选项也接受：