我的日常学习笔记 18.05.11（.Vue文件）

熟悉.vue文件结构
- 三种类型的顶级语言块 <template>、<script> 和 <style>
- 允许添加可选的自定义块
- vue-loader+其他loader 会解析文件，组成一个CommonJS 模块，module.exports 出一个 Vue.js 组件对象。
- <template>=>html，提取为字符串，编译作为vue组件的template，限一个。
- <script>=>js，限一个，ES5可以使用CommonJS语法require()，ES6可以import和export；必须导出组件对象。
- <style>=>CSS可以多个，以有 scoped 或者 module 属性，可以混合使用；设置lang可以预编译；默认使用style-loader处理，通过<style>标签动态加入文档的 <head> 中，也可以配置webpack 将所有 styles 提取到单个 CSS 文件中。
- 可以通过src导入外部文件。这意味着你相对路径需要以./ 开始，你还可以从 NPM 包中直接导入资源(这就是相对于包的绝对路径了)
```
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
```
在 Templates 中使用 ES2015
- 有作用域的CSS：使用 PostCSS 来实现转换
```
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
```
  注意：使用 scoped 后，父组件的样式将不会渗透到子组件中。但是父组件有作用域的CSS会作用到子组件的根节点上。为了布局的考虑嘛
- >>>原生可以使样式作用的更深，样式预处理器需要使用/deep/操作符。
- v-html动态生成的DOM内容不受作用域样式的影响，但是可以使用深度作用选择器来给他们设置样式。
注意：
- CSS 作用域不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。
- 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配。
- CSS Modules
  - <style module></style>
  - <p :class="{ [$style.red]: isRed }">Am I red?</p>
  - console.log(this.$style.red)=>直接JS访问
- 使用预编译器要npm装的，Vue-Cli里面不带，装好了要配置
  - 或者加载一个全局设置文件
- 资源路径处理
  - 在编译过程中，所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。(url(./image.png) 会被转换为require('./image.png'))
  - 编译规则
    1. 如果路径是绝对路径，会原样保留。
    2. 如果路径以 .开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
    3. 如果路径以~开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node 依赖中的资源
    4. 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向/src
- 提取 CSS 到单个文件
  - npm install extract-text-webpack-plugin --save-dev
```
	// webpack.config.js-只是提取 *.vue 文件
	var ExtractTextPlugin = require("extract-text-webpack-plugin")
	
	module.exports = {
	  // other options...
	  module: {
	    rules: [
	      {
	        test: /\.vue$/,
	        loader: 'vue-loader',
	        options: {
	          extractCSS: true
	        }
	      }
	    ]
	  },
	  plugins: [
	    new ExtractTextPlugin("style.css")
	  ]
    }
  ```
```