推荐 21 个顶级的 Vue UI 库

冷不防 2022-03-31 06:24 441阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

**1、Vuetify**

Star 数为 11K，提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器，包括 IE11 和 Safari 9+（使用 polyfill），并提供了 8 个 vue-cli 模板。

地址： [https://github.com/vuetifyjs/vuetify][https_github.com_vuetifyjs_vuetify]

**2、Quasar**

Star 数超过 6K，是构建 Vue.js 响应式网站、PWA、混合移动应用和 Electron 应用的流行框架。Quasar 还支持诸如 HTML/CSS/JS 压缩、缓存清除、摇树优化（tree shaking）、源映射、代码分割和延迟加载、ES6 转码等功能。

地址：[https://github.com/quasarframework/quasar][https_github.com_quasarframework_quasar]

**3、Element**

Star 数将近 28K，是一款面向 Web 的 Vue.js 2.0 UI 工具包。它拥有一个强大的社区和 350 个贡献者，提供了丰富的可定制组件，以及完整的样式指南和更多的资源。 地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

**4、Vue Material**

Star 数差不多 6K，是一个实了谷歌 Material Design 的简单库。该库还提供了一个 webpack 样板、用于 Nuxt.js 的 SSR 模板和一个单独的 HTML 文件（通过这个文件开始使用框架）。这里有一些入门的例子[https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/quick-start。][https_codesandbox.io_s_github_vuematerial_examples_tree_master_examples_quick-start]

地址： [https://github.com/vuematerial/vue-material][https_github.com_vuematerial_vue-material]

**5、Keen-UI**

Star 数将近 3.5 K，一组 Vue 组件的集合，在设计上受到了谷歌 Material Design 的启发。Keen-UI 并不是一个 CSS 框架，它不包含网格系统、排版样式等。相反，它关注的是基于 Javascript 的交互式组件。

地址：[https://github.com/JosephusPaye/Keen-UI][https_github.com_JosephusPaye_Keen-UI]

**6、Buefy**

Star 数 3K 左右，基于 Bulma（[https://bulma.io][https_bulma.io]）提供了一组轻量级的 UI 组件。Vue.js 和 Bulma 是这个库唯一的两个内部依赖。它的大小约为 60KB（压缩后的大小，并且包含了 Bulma）。你可以查看实时文档网站（[https://buefy.github.io/\#/documentation/start）并在][https_buefy.github.io_documentation_start] Codepen 上运行代码。

地址： [https://github.com/buefy/buefy][https_github.com_buefy_buefy]

**7、Bootstrap Vue**

Star 数超过 5K，为 Vue.js 提供了 Bootstrap 4 组件和网格系统的实现，并提供了自动 WAI-ARIA 可访问性标记。

地址： [https://github.com/bootstrap-vue/bootstrap-vue][https_github.com_bootstrap-vue_bootstrap-vue]

**8、Muse-UI**

Star 数超过 6K，是另一个 Vue 2.0 MD 库，提供了 40 多个 UI 组件和可定制主题。文档主要使用中文撰写，不过大多数组件是自解释的，文档只起到辅助作用。该项目在积极的开发和维护当中。 地址：[https://github.com/museui/muse-ui][https_github.com_museui_muse-ui]

**9、AT-UI**

Star 数接近 1.5 K，一个模块化的前端 UI 框架，用于开发基于 Vue.js 的 Web 界面，适用于桌面应用程序。它提供了 NPM+Webpack+Babel 的前端开发工作流和独立的 CSS 样式，值得一试。

地址： [https://github.com/at-ui/at-ui][https_github.com_at-ui_at-ui]

**10、Vux**

Star 数超过 13K，是一个流行的社区库，基于 WeUI 和 Vue 2.0。该库还支持 webpack+vue-loader+vux 的工作流。它的文档也是中文的。

地址： [https://github.com/airyland/vux][https_github.com_airyland_vux]

**11、iView**

Star 数将近 16K，提供了数十种用 Vue.js 构建的 UI 组件和小部件，并采用了干净而优雅的设计。iView 被广泛采用，社区也在积极维护，并提供了 CLI 工具用于以可视化的方式创建项目。这个也值得一试。

地址： [https://github.com/iview/iview][https_github.com_iview_iview]

**12、Uiv**

Star 数“仅”550 左右，用于 Vue 2 的 Bootstrap 3 组件库。所有组件加起来差不多 20KB，唯一的外部依赖是 Vue 和 Bootstrap CSS，支持基于 Webpack 的工作流。 地址：[https://github.com/wxsms/uiv][https_github.com_wxsms_uiv]

**13、Vuikit**

Star 数 1K 左右，一个用于网站界面的响应式的 Vue UI 库，设计风格干净而统一。该库作为由 Yarn 工作区管理的“monorepo”而构建，但图标和主题可作为单独的包发布。

地址： [https://github.com/vuikit/vuikit][https_github.com_vuikit_vuikit]

**14、Onsen UI+Vue**

基于流行的 Onsen-UI 框架，封装了核心 Web 组件并暴露了 Vue 风格的 API。Onsen UI 组件也被设计为能够主动对 prop 做出反应。

地址： [https://onsen.io/v2/guide/vue/][https_onsen.io_v2_guide_vue]

**15、Semantic UI+Vue**

这个项目基本上是 Semantic-UI 框架与 Vue.js 的集成。该库仍在开发当中，提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。

地址： [https://semantic-ui-vue.github.io/][https_semantic-ui-vue.github.io]

**16、Fish-UI**

Star 数“仅”为 500 左右，贡献者也只有 3 个，但 fish-ui 提供了一个基于 Vue 的 Web 工具包，其中包含整洁干净的组件。该库支持 ES2015+Webpack 工作流。它的文档不是很全，但它的设计不容忽视。

地址： [https://github.com/myliang/fish-ui][https_github.com_myliang_fish-ui]

**17、Mint UI**

Star 数超过 11K，为 Vue.js 提供 UI 元素，提供了用于构建移动应用程序的 CSS 和 JS 组件。当全部导入时，压缩后的代码只有月 30KB（JS+CSS），当然它也支持单个组件的导入。

地址： [https://github.com/ElemeFE/mint-ui/][https_github.com_ElemeFE_mint-ui]

**18、Framework7 Vue**

这个集成提供了几乎所有的 Framework7 元素和组件，并集成了 Framework7 Router，按照 Vue 的方式来渲染页面。该库正处于积极的开发和维护当中。 地址：[https://framework7.io/vue/][https_framework7.io_vue]

**19、Cube UI**

Star 数超过 3K，是用于 Vue.js 移动应用程序的 UI 组件库。所有组件都经过了单元测试，并且该库还支持按需进行后期编译和组件导入。这个库仍在积极开发中。

地址： [https://github.com/didi/cube-ui][https_github.com_didi_cube-ui]

**20、Vueblu**

Star 数约 1.5K，是基于 Vue 2.0 和 Bulma 的 UI 组件库，用于构建中台和后台办公产品。它支持 ES2015 和 NPM+Webpack+Babel 工作流，并提供可自定义主题。

地址： [https://github.com/chenz24/vue-blu][https_github.com_chenz24_vue-blu]

**21、Ant Design Vue**

Star 数约 1.5K，用于开发具有数十个 Ant Design 实现组件的企业级后端产品，并支持基于 Webpack 调试的构建解决方案（支持 ES6）。请注意，它的开发已经停止了一段时间。

地址： [https://github.com/okoala/vue-antd][https_github.com_okoala_vue-antd]

**特别推荐**

n3-components ：

[https://github.com/N3-components/N3-components][https_github.com_N3-components_N3-components]

vuikit：

[https://vuikit.js.org/][https_vuikit.js.org]

Kendu UI Vue

[https://www.telerik.com/kendo-vue-ui][https_www.telerik.com_kendo-vue-ui]

Office Fabric-Vue

[https://github.com/aidewoode/office-ui-fabric-vue][https_github.com_aidewoode_office-ui-fabric-vue]

vuestrap

[http://kzima.github.io/vuestrap-base-components/\#/][http_kzima.github.io_vuestrap-base-components]

vueboot

[http://morgul.github.io/vueboot/][http_morgul.github.io_vueboot]

framevuerk

[http://framevuerk.com/][http_framevuerk.com]

Vue WeUI

[http://aidenzou.github.io/vue-weui/\#!/][http_aidenzou.github.io_vue-weui]

Vue-MDC

[https://github.com/posva/vue-mdc][https_github.com_posva_vue-mdc]

转自：[http://blog.talkingdata.com/?p=5993][http_blog.talkingdata.com_p_5993]

[Link 1]: https://www.captainai.net/jiangyu1013/
[https_github.com_vuetifyjs_vuetify]: https://github.com/vuetifyjs/vuetify
[https_github.com_quasarframework_quasar]: https://github.com/quasarframework/quasar
[https_github.com_ElemeFE_element]: https://github.com/ElemeFE/element
[https_codesandbox.io_s_github_vuematerial_examples_tree_master_examples_quick-start]: https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/quick-start%E3%80%82
[https_github.com_vuematerial_vue-material]: https://github.com/vuematerial/vue-material
[https_github.com_JosephusPaye_Keen-UI]: https://github.com/JosephusPaye/Keen-UI
[https_bulma.io]: https://bulma.io/
[https_buefy.github.io_documentation_start]: https://buefy.github.io/#/documentation/start%EF%BC%89%E5%B9%B6%E5%9C%A8
[https_github.com_buefy_buefy]: https://github.com/buefy/buefy
[https_github.com_bootstrap-vue_bootstrap-vue]: https://github.com/bootstrap-vue/bootstrap-vue
[https_github.com_museui_muse-ui]: https://github.com/museui/muse-ui
[https_github.com_at-ui_at-ui]: https://github.com/at-ui/at-ui
[https_github.com_airyland_vux]: https://github.com/airyland/vux
[https_github.com_iview_iview]: https://github.com/iview/iview
[https_github.com_wxsms_uiv]: https://github.com/wxsms/uiv
[https_github.com_vuikit_vuikit]: https://github.com/vuikit/vuikit
[https_onsen.io_v2_guide_vue]: https://onsen.io/v2/guide/vue/
[https_semantic-ui-vue.github.io]: https://semantic-ui-vue.github.io/
[https_github.com_myliang_fish-ui]: https://github.com/myliang/fish-ui
[https_github.com_ElemeFE_mint-ui]: https://github.com/ElemeFE/mint-ui/
[https_framework7.io_vue]: https://framework7.io/vue/
[https_github.com_didi_cube-ui]: https://github.com/didi/cube-ui
[https_github.com_chenz24_vue-blu]: https://github.com/chenz24/vue-blu
[https_github.com_okoala_vue-antd]: https://github.com/okoala/vue-antd
[https_github.com_N3-components_N3-components]: https://github.com/N3-components/N3-components
[https_vuikit.js.org]: https://vuikit.js.org/
[https_www.telerik.com_kendo-vue-ui]: https://www.telerik.com/kendo-vue-ui
[https_github.com_aidewoode_office-ui-fabric-vue]: https://github.com/aidewoode/office-ui-fabric-vue
[http_kzima.github.io_vuestrap-base-components]: http://kzima.github.io/vuestrap-base-components/#/
[http_morgul.github.io_vueboot]: http://morgul.github.io/vueboot/
[http_framevuerk.com]: http://framevuerk.com/
[http_aidenzou.github.io_vue-weui]: http://aidenzou.github.io/vue-weui/#!/
[https_github.com_posva_vue-mdc]: https://github.com/posva/vue-mdc
[http_blog.talkingdata.com_p_5993]: http://blog.talkingdata.com/?p=5993