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

 

热替换

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