vue-loader 是一个Webpack的 loader，使用 vue-loader 就可以用 Vue Single-File Component (SFC) 即单文件组件的形式编写一个组件，vue-loader 会将.vue文件转换为 JS模块。
如果在项目开始阶段为前端工程化复杂的配置而困惑，不妨试试使用 IDE 自动构建，推荐使用 WebStorm 新建 Vue 项目，参考 WebStorm 2018 的破解、汉化与设置使用
.vue 单文件组件 (SFC) 规范
1. 模板块
一个SFC中最多一个< template >块；
其内容将被提取为字符串传递给 vue-template-compiler ，然后webpack将其编译为js渲染函数，并最终注入到从
vue-loader 特性概述
- 支持组件的各个 template，script，style 模块使用其他非默认语言，比如：
对于模版的处理方式略有不同，因为大多数 Webpack 模版处理器（比如 pug-loader）会返回模版处理函数，而不是编译的 HTML 字符串，我们可以原始的 pug 替代 pug-loader。
div h1 Hello world!CSS 作用域：scope
当
hivue-loader 处理的 CSS 输出，都是通过 PostCSS 进行作用域重写，PostCSS 处理后如下：
hi使用 scope 时，子组件的根节点将受父组件作用域 CSS 影响
使用 scope 作用域时，父组件的样式不会泄漏到子组件中。 但子组件的根节点将受父级作用域 CSS 和子级作用域 CSS 的影响。 这是为了父级可以设置子组件根元素的样式以进行布局。
使父组件可以使用‘ >>> ’或‘ /deep/ ’ 这种深度选择器作用于子组件
编译为
.a[data-v-f3f3eg9] .b { /* ... */ }动态生成的 DOM 内容不受 scope style 的影响，但可以使用深度选择器进行样式改变
使用 scope 作用域不能弃用 class 或 id 等
考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，选择属性选择器如 p { color: red } 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 class 或者 id 代替，比如 .example { color: red }，这样几乎没有性能影响
在递归组件中注意后代选择器
对于带有 .a .b 的 CSS 选择器，如果匹配 .a 的元素包含递归子组件，则该子组件中的所有 .b 将与其匹配。
小思考：在 template 中只包含一个外层节点，不能多个节点并列，这个设计思路遵循父组件可以操作子节点的一个根节点，即使在 CSS 局部作用域下依然有效
CSS 模块模式：module
一个 CSS Module 其实就是一个 CSS 类型的文件，其编写方式与 CSS 相同，但在编译时会编译为 ICSS 低级交换格式。
其默认所有的类名/动画名都在本地作用域，当从 JS 模块导入 CSS 模块时，它会导出包含从本地名称到全局名称的所有映射的一个对象在 CSS Module 中，所有的 url 和 @import 都是被看成模块依赖，例如 url(./image.png) 会被转换为 require(‘./image.png’)
CSS 模块处理是通过 css-loader，请求的资源可以是在 node_modules 中。CSS Module 配置
Vue loader 集成了 CSS Module，使用前需要在 css-loader 中设置 modules: true，如下：
// webpack.config.js -> module.rules { test: /\.css$/, use :[ 'vue-style-loader', { loader: 'css-loader', options: { // enable CSS Modules modules: true, // customize generated class names localIdentName: '[local]_[hash:base64:8]' } } ] }然后就在
CSS Module 使用
这样 Vue loader 会将 css module 本地对象编译为计算属性注入到组件中，默认值为 $style。template 可以通过动态类绑定使用：
This should be red
JS 也可以通过 this.$style访问：
为多个 style 自定义标识符
一个 .vue 组件可以有多个
结合预处理
CSS Module 还可以在预处理（SASS，LESS等）中使用，在配置 webpack rules 时加上 modules: true，例如：
// webpack.config.js -> module.rules test: /\.scss$/ use[{ loader: 'css-loader', options: { modules: true } }].vue 中自定义节点/语言块
除了默认的等节点，还可以加自定义节点，并使用自定义的 loader 处理他们；
可以给节点加 lang 属性，此时节点 rule 匹配 lang 的扩展；
如果没有标记 lang，则自定义节点的 name 和 rule 需要在 webpack 中声明。小栗子：自定义语言块
首先需要 loader。为了将自定义块注入到组件中，自定义一个 loader 如下：
// myblock-loader.js module.exports = function (source, map) { this.callback( null, `export default function (Component) { Component.options.__myblock = ${ JSON.stringify(source) } }`, map ) }配置到 webpack
// webpack.config.js -> module.rules { resourceQuery: /blockType=myblock/, loader: require.resolve('./myblock-loader.js') }在组件中使用
HelloThis is the documentation for component B. 组件间的复用
{{ myblock }}
热重载：不刷新页面的更新
当更改 .vue 的 template 或 style 时，页面不刷新也可实现内容动态的变化，并保留着程序及其组件的状态。在以下情况下会保持热重载：
- 编辑组件的