Vue 组件细则
.vue 文件最多包含一个 <template> 块
.vue 文件最多包含一个 <script> 块
.vue 文件可以包含多个 <style> 标签
src
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
还可以从 NPM 包中直接导入资源
自定义块上同样支持 src 导入
注释
顶层注释使用 HTML 注释语法：
ES2015
https://github.com/lukehoban/es6features
https://babeljs.io/learn-es2015/
https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-
http://babeljs.io/docs/usage/polyfill/
CSS作用域的
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
深度作用选择器
影响子组件，你可以使用 >>> 操作符,你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作
<style scoped>
.a >>> .b { /* ... */ }
.a /deep/ .b{}
</style>
//.a[data-v-f3f3eg9] .b { /* ... */ }
css module
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
<script>
export default {
created () {
console.log(this.$style.red)
// -> "_1VyoJ-uZOjlOxP7jWUy19_0"
// an identifier generated based on filename and className.
}
}
</script>
自定义注入名称
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
PostCSS
热重载
函数式组件
预处理器
<style lang="sass">
<script lang="coffee">
<template lang="pug">
资源路径处理
资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖
url(./image.png) 会被转换为 require('./image.png')，而
<img src="../image.png">
//createElement('img', { attrs: { src: require('../image.png') }})
进阶配置
提取 CSS 文件
npm install extract-text-webpack-plugin --save-dev
