<template>
、<script>
和 <style>
style 可以指定预处理,scoped等
自定义模块
如果找到了一个自定义块,并且规则匹配成功会编译,否则默默不处理。
// webpack.config.js { module: { rules: [ { resourceQuery: /blockType=foo/,loader: ‘loader-to-use‘ } ] } } // 如此配置,如果是webpack构建的项目,可以使用 // 如果是vue-cli项目,无法解析,需要改下配置 // vue.config.js module.exports = { // configureWebpack: (config) => { config.module.rules.push({ resourceQuery: /blockType=docs/,loader: require.resolve(‘./docs-loader.js‘) }) } } import Layer from ‘./Layer.vue‘ 独立定义模块 <docs> 我是自定义模块,和style同级 </docs> template <p>{{docs}}</p> data () { docs: Layer.__docs }
参考 https://segmentfault.com/a/1190000016101954?utm_source=tag-newest
代码校验
Eslint 配置
stylelint
// webpack.config.js const StyleLintPlugin = require(‘stylelint-webpack-plugin‘); module.exports = { // ... 其它选项 plugins: [ new StyleLintPlugin({ files: [‘**/*.{vue,htm,html,css,sss,less,scss,sass}‘],}) ] }
scoped css
当 <style>
标签有 scoped
属性时,它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装
混合使用
<style>
/* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style>
深度影响
<style scoped> .a >>> .b { /* sass 无法解析 >>> 可以用 ::v-deep /deep/ 代替 */ } </style>
v-html
影响性能的写法
如果是特性选择器组合,渲染会慢很多,例如: p: {color: red;},替代方式: .classp { color: red; }
还有少用后代选择器 .a .b 使用样式b的组件都会影响嵌套的子组件。
这种情况要在使用scoped的情况,注意!
css-module
vue-loader对css-modules也进行了专业支持。
{
test: /\.css$/,use: [ ‘vue-style-loader‘,{ loader: ‘css-loader‘,options: { // 开启 CSS Modules modules: true,// 自定义生成的类名 localIdentName: ‘[local]_[hash:base64:8]‘ } } ] } template 中 已经是computed写法: // 条件判断 和 数组组合 <p :class="{ [$style.red]: isRed }"> Am I red? </p> <p :class="[$style.red,$style.bold]"> Red and bold </p> 可以在组件属性里通过this访问 this.$style.class // 多个模块可以分模块访问 <div :class="aaa.root"> </div> <style lang="less" module="aaa"> .root { color: red; } </style>
在 style 标签加上 module 开启module功能,引入方式 :class="$style.classname"这个 module
作用是 指引 Vue Loader 作为名为 $style
的计算属性,向组件添加 CSS Modules 局部对象。
热替换
是指在开发阶段,组件有更新客户端会替换对应的更新,而不是刷新页面,提升了开发效率。