自定义文件组件类型
<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 配置
// .eslintrc.js
module.exports = {
extends: [
"plugin:vue/essential"
]
}
eslint --ext js,vue MyComponent.vue
// 另一种配置方式
// webpack.config.js
module.exports = {
// ... 其它选项
module: {
rules: [
{
enforce: ‘pre‘,
test: /\.(js|vue)$/,
loader: ‘eslint-loader‘,
exclude: /node_modules/
}
]
}
}
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
这个指令生成的dom结构不受 scoped的影响
影响性能的写法
如果是特性选择器组合，渲染会慢很多，例如： 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 局部对象。
热替换
是指在开发阶段，组件有更新客户端会替换对应的更新，而不是刷新页面，提升了开发效率。
原文：https://www.cnblogs.com/the-last/p/11462617.html