Vue UI组件库对比与选择

Chase620
• 阅读 1600

主流组件库对比

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

  1. import引入对应css文件即可
  2. 搭配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']
  ]
} 

总结

均可通过babel-plugin-importcustomStyleName,配置主题包,进行按需加载组件和对应样式文件

第三方库或自研

  • 自研需要大量的人力成本和时间成本,需要考虑后期的长期维护和稳定性
  • 第三方库考虑其稳定性和维护性,可开发自定义主题进行定制化开发

参考文档

本文转自 https://www.jianshu.com/p/6dd5ec203a84,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
11个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这