Vue UI组件库对比与选择

Chase620 等级 601 0 0

主流组件库对比

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,如有侵权,请联系删除。

收藏
评论区

相关推荐

【官宣】Vue 3.0 发布!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。 原文:https://github.com/vuejs/vuenext/releases 作者:Vue 团队 译文:https://zh
🎉无人维护?官方打脸:Element UI for Vue 3.0 来了!🎊
Element 开发团队宣布正式发布 Element Plus 的首个 beta 版本,Element Plus 是 Element 对 Vue 3.0 的升级适配。此前网上有传言称 Element 无人维护,Element UI 也不会支持 Vue 3.0,这次官方出来打脸了。 image(https://imghelloworld.ossc
前端组件/库打包利器rollup使用与配置实战
目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发布自己的库和组件。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/16cb1c297071015523fb08d9e0f
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
Vue UI组件库对比与选择
主流组件库对比PC端| UI组件库名 | github star | 是否可自定义主题 | 是否支持vue3 | 发布时间 | 稳定性 | 贡献者 || | | | | | | || | | 可自定义 | 支持,beta版本,, | 201608,4年半 | 长期支持,最新两个
前端技术栈:5分钟入门VUE+Element UI
目录前端技术栈:5分钟入门VUEElement UI前言2021了,VUE都出3.0了,还不开始学习VUE?那不是一个全栈攻城狮的自我修养,虽然VUE出3.0了,但是入门还是建议VUE2.0 Element UI,毕竟3.0还要等养肥了在学,现在教程太少,学习2.0之后在学3.0也能更加理解为什么要这么去改进VUE是啥?简单来说就是
Vue的学习笔记(上篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 二、什么是vmodel指令?vmode
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue的学习笔记(中篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:。这篇文章我
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
5款vue前端UI框架
Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。实用的 Vue.js组件库可以帮助我们快速搭建页面,下面介绍小编认为比较受欢迎的五个vue前端ui框架。TOP5——VueBluVueBlu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵
Vue的学习笔记(下篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。前面几天我们已经分享了和,今天我们一起来看看下篇。 二
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源 Vue.js Element UI 优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用Element UI
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d