vue-loader 的深入用法_html-js-css

概述自定义文件组件类型 <template>、<script> 和 <style> style 可以指定预处理，scoped等自定义模块除了三个基本模块以外，还可以添加自定义模块。如果找到了一个自定义块，并且规则匹配成功会编译，否则默默不处理。 // webpack.config.js{ module: { rules: [ { reso

自定义文件组件类型

<template>、<script> 和 <style>

style 可以指定预处理，scoped等

自定义模块

除了三个基本模块以外，还可以添加自定义模块。

如果找到了一个自定义块，并且规则匹配成功会编译，否则默默不处理。

// webpack.config.Js{  module: {    rules: [      {        resourcequery: /blockType=foo/,loader: ‘loader-to-use‘      }    ]  }}// 如此配置，如果是webpack构建的项目，可以使用// 如果是vue-cli项目，无法解析，需要改下配置// vue.config.Jsmodule.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.Jsmodule.exports = {  extends: [    "plugin:vue/essential"  ]}eslint --ext Js,vue MyComponent.vue// 另一种配置方式// webpack.config.Jsmodule.exports = {  // ... 其它选项  module: {    rules: [      {        enforce: ‘pre‘,test: /\.(Js|vue)$/,loader: ‘eslint-loader‘,exclude: /node_modules/      }    ]  }}

stylelint

// webpack.config.Jsconst 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>