主流组件库对比

PC端

UI组件库名	github star	是否可自定义主题	是否支持vue3	发布时间	稳定性	贡献者
ElementUI	49.3k	可自定义	支持，beta版本，3版本官网，3版本github	2016-08，4年半	长期支持，最新两个版本间隔时间1个半月	饿了么
Vuetify	29.7k	可自定义	开发阶段，计划2021Q3发布	2016-12，4年3个月	长期支持，更新频率为半个月	Vuetify公司
iview/View UI	23.7k	可自定义	不支持	2017-02，4年	长期支持，更新频率为3个月	北京视图更新科技有限公司
Ant Design	13.8k	可自定义	支持，3版本	2018-04，3年	长期支持，更新频率为半个月	蚂蚁金服
Veui	789	可自定义	不支持	2017-07，3年半	长期支持，更新频率为半个月	百度

移动端

UI组件库名	github star	是否可自定义主题	是否支持vue3	发布时间	稳定性	贡献者
Vant	16.8k	可自定义	支持3版本	2017-04，4年	长期支持，更新频率为半个月	有赞前端团队
cube ui	8.6k	可自定义	不支持	2017-11，3年3个月	暂无维护，最后发布时间为2020-04	滴滴
mint-ui	16.3k	暂不支持	不支持	2016-09，4年半	暂无维护，最后发布时间为2017-04	饿了么前端团队
vux	17.4k	可简单配置	不支持	2016-03，5年	暂无维护，最后发布时间为2019-04	个人

重点介绍『定制主题』

组件选择过程中，由于业务的不同，是否可自定义主题显得尤为重要。
此part重点介绍支持vue3的组件的主题定制功能。

ElementUI

demo地址

1. 仅替换主题色

在线主题生成工具生成对应颜色主题，下载主题，将样式文件加入到项目中，在引入element的地方引入样式文件即可

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

2. 改变 SCSS 变量

在项目中改变 Element Plus 的样式变量。新建一个SCSS样式文件，例如 element-variables.scss

3. 命令行主题工具

安装element-theme,element-theme-chalk,通过et调用工具，执行-i初始化变量文件，生成变量文件element-variables.scss。

修改对象变量后，编译主题，将主题编译输出到指定目录。使用自定义主题的方式进行引入使用。

4. 使用自定义主题

import引入对应css文件即可
搭配babel-plugin-component插件按需引入组件主题
babel-plugin-import和babel-plugin-component的区别

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. 自定义主题包

新建主题包，发布到npm上，通过npm install的方式引用
主题包目录：

- theme
    - alert.less
    - button.less
    - ....组件对应less文件

发布theme包到npm上

引用主题包：

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        // 自定义样式包
        customStyleName: name => {
          // theme为自定义主题包名，按需加载对应组件样式
          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. 自定义主题包

新建主题包，发布到npm上，通过npm install的方式引用
主题包目录：

- theme
    - alert.less
    - button.less
    - ....组件对应less文件

发布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']
  ]
}