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

 

熱替換

是指在開發階段，組件有更新客戶端會替換對應的更新，而不是刷新頁面，提升了開發效率。