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

热替换

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

vue-loader 的深入用法

猜你喜欢