vue-loader 的深入用法

自定义文件组件类型

<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 局部对象。

 

热替换

是指在开发阶段，组件有更新客户端会替换对应的更新，而不是刷新页面，提升了开发效率。