本文主要跟大家分享一些 vue 的 UI 库, 这些库都是 GitHub 高星的库, 废话不多说, 我们一起来看看.
1. Vuetify ( 24k)
网站: https://vuetifyjs.com/zh-Hans/
GitHub: https://github.com/vuetifyjs/vuetify
Vuetify 是一个 Vue UI 库, 包含手工制作的精美材料组件. 不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及. Vuetify 有超过 100 个组件元素, 带有响应式网格系统, 完全支持事件处理. 通过每周的补丁和持续的更新, Vuetify 很可能在未来几年内仍然是很受欢迎的 Vue 库之一.
2. Vue Material ( 8587)
网站: https://vuematerial.io/
GitHub: https://github.com/vuematerial/vue-material
Vue Material 是一个轻量级的框架, 建立在谷歌的 Material Design 基础上. 设计强大的和美观的 web 应用并适用于不同的屏幕. 我们可以动态地生成和使用主题, 根据自己的需求只用组件, UI 元素与组件的优势在于可以更简单的使用 API 和其他的. Vue Material 的目的是提供一组可重用的组件和一系列的 UI 元素, 使用 Vue 2.0 建立支持 主流的浏览器 的应用.
3. Element UI ( 44k)
网站: https://element.eleme.io/#/zh-CN/resource
这个就不多说, 国内前端开发基本都知道的, 强大好用的 Vue UI 库.
4. Buefy ( 7.1k)
网站: https://buefy.org/
GitHub: https://github.com/buefy/buefy
如果我们希望为项目提供一个更简单且轻量的 UI 库, 那么这个基于 bulma 的轻量级工具是一个很好的选择. 虽然它的组件比列表中的其他库要少, 但这也是它的优点之一. 保持 Buefy 轻量级, 并且只保留最重要的组件, 如下拉菜单, 表单等, 对于只想为几个关键组件使用库的开发人员来说, 这是最好的选择之一.
5. Quasar Framework ( 13.8k)
网站: http://www.quasarchs.com/
GitHub: https://github.com/buefy/buefy
Quasar 允许开发人员编写一次代码, 并且使用相同的代码库同时部署为网站, PWA,Mobile App 和 Electron App. 使用最先进的 CLI 设计应用程序, 并提供精心编写, 速度非常快的 Quasar Web 组件.
当使用 Quasar 时, 你不需要像 Hammerjs,Momentjs 或 Bootstrap 这样的额外重型库. 它拥有这些功能, 而且体积很小!
6. VueStrap ( 4.8k)
网站: http://yuche.github.io/vue-strap/
GitHub: https://github.com/yuche/vue-strap
接下来的两个库都是使用 vuejs 实现类似 Bootstrap 组件的两种方式. VueStrap 接受 Bootstrap 中发现的所有元素, 并具有可以轻松导入和呈现的等效 Vue 组件.
7. Bootstrap Vue ( 10.9k)
网站: https://bootstrap-vue.js.org/
GitHub: https://github.com/bootstrap-vue/bootstrap-vue
最近, Vue.JS 生态系统发布了一个新的软件包. 它是流行的 Bootstrap 框架与 Vue.JS 的集成. 这个包称为 BootstrapVue. 它允许我们使用与 Bootstrap(v4)集成的自定义组件. 它还支持自定义 Bootstrap 组件, 网格系统, 还支持 Vue.JS 指令.
8. UIV ( 813)
网站: https://uiv.wxsm.space/
GitHub: https://github.com/wxsms/uiv
Bootstrap 和 Vue 之间的又一个集成. 尽管我对 UIV 的了解还不足以直接将其与前两个库进行比较, 但需要注意一些关键事项. UIV 使用 Bootstrap CSS 作为依赖项, 从而使库本身轻量级化, 并且根据其文档, 它支持 SSR(服务器端渲染).
9. Mint UI ( 15.5k)
网站: http://mint-ui.github.io/#!/zh-cn
GitHub: https://github.com/ElemeFE/mint-ui/
Mint UI 包含丰富的 CSS 和 JS 组件, 能够满足日常的移动端开发需要. 通过它, 可以快速构建出风格统一的页面, 提升开发效率. 真正意义上的按需加载组件. 可以只加载声明过的组件及其样式文件, 无需再纠结文件体积过大. ue.JS 高效的组件化方案, Mint UI 做到了轻量化. 即使全部引入, 压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip.
10. Vuecidity
网站: https://vuecidity.wemakesites.net/
Vuecidity 是基于 Material Design 的 VueJS 组件库. 通过表单元素, 指令, 布局选项和 UI 组件, Vuecidity 几乎涵盖了所有基础. 通过支持 Material Designs 主题, Vuecidity 作为 Vue 版本, 非常适合那些对 Material Design 感到满意的开发人员.
11. iView ( 23.1)
网站: https://www.iviewui.com/
GitHub: https://github.com/iview/iview
iView 是一套基于 Vue.JS 的开源 UI 组件库, 主要服务于 PC 界面的中后台产品, 其特性包括: 高质量, 功能丰富友好的 API , 自由灵活地使用空间, 细致, 漂亮的 UI, 事无巨细的文档和可自定义主题.
- 12. DeepReader ( 87)
- GitHub: https://github.com/deep-philology/DeepReader
这个模块化框架可能没有其他库那么广泛的用例, 但是它的功能太酷了, 所以还是要介绍的. DeepReader 构建了在线阅读环境, 并带有可以添加注释, 小部件和不同工具的不同组件, 以创建完整的学习 / 阅读环境.
13. KeenUI ( 3.9k )
网站: https://josephuspaye.github.io/Keen-UI/#/ui-alert
GitHub: https://github.com/JosephusPaye/Keen-UI
KeenUI 使用 Vue 编写的基本轻量级 UI 组件库, 并受 Material Design 的启发, 虽然受 Material UI 规范的启发, 但 Keen-UI 并不是真正的 Material UI 库. 它不是一个 CSS 框架, 不包括网格系统或排版风格, 但有需要 JavaScript 的组件.
14. AT UI ( 1795)
网站: https://aotu.io/notes/2017/08/28/at-ui/
GitHub: https://github.com/aliqin/atui
AT UI 专为前端 Web 应用程序而构建. 具备使用 CSS 预处理程序的能力, 它几乎适用于几乎所有开发团队. 就我个人而言, 我真的很喜欢 AT UI 随附的最小样式和字体选择, 而且我认为添加到任何项目中都非常直观且容易. 与其他库相比, 它的内置图标库 (Feather) 也是一个巨大的好处.
15. Muse-UI ( 7084)
网站: https://muse-ui.org/#/en-US
GitHub: https://github.com/museui/muse-ui
Muse UI 基于 Vue2.0 开发, Vue2.0 是当下最快的前端框架之一, 小巧, API 友好, 可用于开发的复杂单页应用. Muse UI 是一个受 Material Design 启发的库, 不仅包含我们所期望的所有核心 Web 组件, 而且还包括一些移动组件, 例如对话框, 滑块和响应式刷新按钮.
16 Vue Blu ( 1.5k)
网站: https://chenz24.github.io/vue-blu/#/
GitHub: https://github.com/chenz24/vue-blu
像 Buefy 一样, Vue Blu 是 Vue 和 Bulma 之间的集成. 它非常有用且轻巧, 并且与 NPM,Webpack 和 Babel 堆栈具有很好的集成. 它具有强大的布尔玛集成度, 并充分利用了 Flexbox 功能. 我最喜欢的组件之一是时间线, 可以轻松创建漂亮的时间线, 非常适合进行项目更新.
好了, 今天就分享到这里, 你最喜欢的 Vue.JS 库是什么?
来源: http://www.tuicool.com/articles/q6Nbea6