主流組件庫對比

PC端

移動端

重點介紹『定制主題』

組件選擇過程中，由于業(yè)務(wù)的不同，是否可自定義主題顯得尤為重要。
此part重點介紹支持vue3的組件的主題定制功能。

ElementUI

demo地址

1. 僅替換主題色

在線主題生成工具生成對應(yīng)顏色主題，下載主題，將樣式文件加入到項目中，在引入element的地方引入樣式文件即可

import '@/assets/style/theme/index.css'

2. 改變 SCSS 變量

在項目中改變 Element Plus 的樣式變量。新建一個SCSS樣式文件，例如 element-variables.scss

3. 命令行主題工具

安裝element-theme,element-theme-chalk,通過et調(diào)用工具，執(zhí)行-i初始化變量文件，生成變量文件element-variables.scss。

修改對象變量后，編譯主題，將主題編譯輸出到指定目錄。使用自定義主題的方式進行引入使用。

4. 使用自定義主題

1. import引入對應(yīng)css文件即可
2. 搭配babel-plugin-component插件按需引入組件主題
   babel-plugin-import和babel-plugin-component的區(qū)別

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',
        styleLibraryName: '~src/theme' // 本地樣式目錄
      }
    ]
  ]
}

或搭配babel-plugin-import插件按需引入組件主題

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'element-plus',
      libraryDirectory: 'es',
      customStyleName: name => {
        return `theme/${name}.less`
      }
    }, 'element-plus']
  ]
}

Ant design

1. 通過modifyVars來覆蓋less變量

加載在less文件的底部，會覆蓋之前定義的變量

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 更改變量
          modifyVars: {
            'blue-base': '#1DA57A',
            'primary-color': '#1DA57A'
            'border-radius-base': '3px'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

2. 配置less文件

引入單獨變量文件，覆蓋之前的變量

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 樣式入口文件
@import 'your-theme-file.less'; // 用于覆蓋上面定義的變量

3. 自定義主題包

新建主題包，發(fā)布到npm上，通過npm install的方式引用
主題包目錄：

- theme
    - alert.less
    - button.less
    - ....組件對應(yīng)less文件

發(fā)布theme包到npm上

引用主題包：

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        // 自定義樣式包
        customStyleName: name => {
          // theme為自定義主題包名，按需加載對應(yīng)組件樣式
          return `theme/${name}.less`
        }
      }
    ]
  ]
}

Vant

1. 通過modifyVars來覆蓋less變量

加載在less文件的底部，會覆蓋之前定義的變量
vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 更改變量
          modifyVars: {
            // 直接覆蓋變量
            'button-primary-background-color': 'red',
            'text-color': '#111',
            'border-color': '#eee'
            // 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）
            hack: 'true; @import "@/theme/variables.less";'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

2. 自定義主題包

新建主題包，發(fā)布到npm上，通過npm install的方式引用
主題包目錄：

- theme
    - alert.less
    - button.less
    - ....組件對應(yīng)less文件

發(fā)布theme包到npm上

引用主題包：

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      // style: (name) => `${name}/style/less`
      customStyleName: name => {
        return `theme/${name}.less`
      }
    }, 'vant']
  ]
}

總結(jié)

均可通過babel-plugin-import的customStyleName，配置主題包，進行按需加載組件和對應(yīng)樣式文件

第三方庫或自研

• 自研需要大量的人力成本和時間成本，需要考慮后期的長期維護和穩(wěn)定性
• 第三方庫考慮其穩(wěn)定性和維護性，可開發(fā)自定義主題進行定制化開發(fā)

參考文檔

• https://www.zhihu.com/question/298703830/answer/1227084369
• https://segmentfault.com/a/1190000021876315