vue 组件库推荐

小呀么小菜鸡
1,843 阅读8分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

【详细请看标题官网链接】

1. iView UI组件库 【www.iviewui.com/ 】
特性
  • 丰富的组件和功能，满足绝大部分网站场景
  • 提供开箱即用的 Admin 系统 和 快速增删改查 表格组件，极大程度节省开发成本
  • 友好的 API ，自由灵活地使用空间
  • 细致、漂亮的 UI
  • 事无巨细的文档
  • 可自定义主题
兼容环境

适用于 Vue.js 3，兼容现代浏览器，不支持 IE（如需支持 IE9+，请使用 Vue.js 2 及 View UI）。

2. vux UI组件库 【vux.li/ 】

VUX 必须配合 vux-loader 使用，如果不使用 vux2 模板请按照文档正确配置。less@3.x 有严重的兼容问题，请暂时使用 less@^2.7.3。暂未适配 vue-cli@3.x。

VUX 并不是一个能解决所有场景的完美解决方案(实际上也没有一个方案能解决所有问题)，也会出现某些bug或者某些特性不支持

Vux是基于WeUI和Vue2.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位已经很明确了，一是：Vue移动端UI组件库，二是：WeUI的基础样式库。Vux的组件涵盖了所有的WeUI的内容，还扩展了一些常用的组件。比如：Sticky、timeline、v-chart、XCircle。Vux是个人维护的。但是GitHub上star还是很高的，达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux文档基本的组件用法和效果都讲解到位了。在vux官网上也展示了很多Vux的使用案例。

3. Element UI组件库【element.eleme.io/#/zh-CN 】

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库，更新频率还是很高的，基本一周到半个月都会发布一个新版本。组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富，Element应该是一个质量比较高的Vue UI组件库。

4. Mint UI组件库【mint-ui.github.io/#!/zh-cn 】

Mint UI基于 Vue.js 的移动端组件库，同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的，开发移动端web项目还是很方便，文档也很简介明了。很多页面Mint UI组件都已经封装好，基本可以照着例子写，简单的调整一下就可以实现。

5. Bootstrap-Vue UI组件库【code.z01.com/bootstrap-v… 】

Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和网格系统的实现，完成了广泛和自动化的WAI ARA可访问性标记。Bootstrap 4是最新发布的版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。

6. Ant Design Vue UI组件库【www.antdv.com/docs/vue/in… 】

Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。Ant Design Vue共享Ant Design of React设计工具体系，实现了所有Ant Design of React的组件，支持现代浏览器和 IE9 及以上（需要 polyfills）。可以让熟悉Ant Design的在使用Vue时，很容易的上手。

7. AT-UI UI组件库【at-ui.github.io/at-ui/#/zh 】

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品，支持现代浏览器和 IE9 及以上。

8. Vant UI组件库【vant-ui.github.io/vant/#/zh-C… 】

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本

9. cube-ui UI组件库【didi.github.io/cube-ui/#/z…

cube-ui 是基于 Vue.js 实现的精致移动端组件库。

  • 质量可靠 由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。
  • 体验极致 以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
  • 标准规范 遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
  • 扩展性强 支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
10. Muse-UI UI组件库【muse-ui.org/#/zh-CN 】

Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件，用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用

11. N3-components UI组件库【n3-components.github.io/N3-componen… 】

N3组件库是基于Vue.js构建的，让前端工程师和全栈工程师能快速构建页面和应用。N3-components超过60个组件 组件列表、自定义样式、支持多种模化范式（UMD）、使用ES6进行开发。

12. Mand Mobile【didi.github.io/mand-mobile… 】

Mand Mobile是面向金融场景设计的移动端组件库，基于Vue.js实现。目前已实际应用于滴滴四大金融业务板块的10余款产品中。

特性
  • 丰富的组件 40+的实用组件，能够满足移动端开发的基本需求，尤其是对金融场景的需求进行了特别支持
  • 统一的视觉规范 由滴滴金融设计师设计并维护，保证了应用的项目内部、项目之间都能保持高度的视觉一致性
  • 适用于多场景的产生 提供按需加载能力，使用灵活，避免引入无用代码，导出es，umd两种格式以及px, vh/vw两种样式单位
  • 灵活转换的样式主题 UI样式可配置，拓展灵活，轻松适应不同的设计风格
  • 支持TypeScript
  • 支持服务端渲染
13. we-vue UI组件库【gitee.com/tianyong/we… 】

暂时打不开网址下载项目启动查看示列

we-vue 是一套基于 Vue.js 的移动关组件库，结合 weui.css 样式库，封装了一系列组件，非常适于微信公众号等移动端开发。we-vue 包含35+ 个组件，单元测试覆盖率超 98%，支持 babel-plugin-import，完善的在线文档，详细的在线示例。

14. veui UI组件库【veui.dev/ 】

veui UI组件库git地址 : github.com/ecomfe/veui

VEUI 采用组件库样式与逻辑分离的方式开发，用户可以灵活地指定甚至自行开发 VEUI 的主题包。VEUI 官方提供的默认主题包为 veui-theme-dls。

VEUI 是通过未经转译的 Vue 单文件组件及 ES 模块进行发布的，需要与用户项目本身一同编译构建。VEUI 除了提供丰富的组件，还提供多个功能强大的指令及插件，帮助开发者迅速搭建基于 Vue 的应用。

15. Semantic-UI-Vue UI组件库【semantic-ui-vue.github.io/#/ 】

Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。

Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。Semantic-UI-Vue提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。

16. NutUI组件库【nutui.jd.com/#/ 】

NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。NutUI组件库支持跨平台，自动转微信小程序组件（稍后上线，敬请期待），30+ 京东移动端项目正在使用，基于京东APP 7.0 视觉规范，支持按需加载，详尽的文档和示例，支持定制主题，支持多语言（国际化），支持 TypeScript，支持服务端渲染（Vue SSR），单元测试加持，配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程。

特性
  • 70+ 高质量组件，覆盖移动端主流场景
  • 支持一套代码同时开发多端小程序+H5
  • 基于京东APP 10.0 视觉规范
  • 支持按需引用
  • 详尽的文档和示例
  • 支持 TypeScript
  • 支持服务端渲染（测试阶段）
  • 支持定制主题，内置 700+ 个主题变量
  • 国际化支持
  • 单元测试覆盖率超过 80%，保障稳定性
  • 提供 Sketch 设计资源
17.Vuetify【vuetifyjs.com/zh-Hans/ 】

Vuetify 是建立在Vue.js之上的完备的界面框架。 该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。 与其他框架不同。 Vuetify从一开始就设计为易于学习的并且拥有来自 Material设计规范 的数百个精心设计组件。

Vuetify采用移动优先的设计，这意味着无论是在手机、平板电脑还是台式电脑上，你的应用程序都可以开箱即用。

Vuetify完全按照Material设计规范进行开发，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能。 使用独特和动态的 布局 自定义您的应用程序，并使用 SASS 变量 自定义您的组件的样式。

请选择对项目有用的对应的组件库，一个好的UI组件库对一个Web项目来说太重要了。

avatar
文章
阅读
粉丝