主流組件庫(kù)對(duì)比

PC端

移動(dòng)端

重點(diǎn)介紹『定制主題』

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

ElementUI

demo地址

1. 僅替換主題色

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

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

2. 改變 SCSS 變量

在項(xiàng)目中改變 Element Plus 的樣式變量。新建一個(gè)SCSS樣式文件弟胀，例如 element-variables.scss

3. 命令行主題工具

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

修改對(duì)象變量后萧朝，編譯主題，將主題編譯輸出到指定目錄夏哭。使用自定義主題的方式進(jìn)行引入使用检柬。

4. 使用自定義主題

1. import引入對(duì)應(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. 通過(guò)modifyVars來(lái)覆蓋less變量

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

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文件

引入單獨(dú)變量文件竖配，覆蓋之前的變量

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

3. 自定義主題包

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

- theme
    - alert.less
    - button.less
    - ....組件對(duì)應(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為自定義主題包名进胯，按需加載對(duì)應(yīng)組件樣式
          return `theme/${name}.less`
        }
      }
    ]
  ]
}

Vant

1. 通過(guò)modifyVars來(lái)覆蓋less變量

加載在less文件的底部用爪，會(huì)覆蓋之前定義的變量
vue.config.js

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

2. 自定義主題包

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

- theme
    - alert.less
    - button.less
    - ....組件對(duì)應(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é)

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

第三方庫(kù)或自研

• 自研需要大量的人力成本和時(shí)間成本盯漂，需要考慮后期的長(zhǎng)期維護(hù)和穩(wěn)定性
• 第三方庫(kù)考慮其穩(wěn)定性和維護(hù)性颇玷，可開(kāi)發(fā)自定義主題進(jìn)行定制化開(kāi)發(fā)

參考文檔

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