vue 常用ui组件

学习资料

• vue github (里面包含了vue, vuex, vue-cli等源码)
• vue-cli 官网
• vue 中文官网
• vuex 官网
• vue-router
• vue专题
• vue 源码分析
• vue-cli#2.0 webpack 配置分析

移动端组件

vux

VUX 是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。

• 项目主页:https://doc.vux.li/zh-CN/
• Github: https://github.com/airyland/vux

weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

• 社区: https://weex.apache.org/zh/community/solutions.html
• 官网: https://weex.apache.org/zh/
• Github: https://github.com/alibaba/weex

Mand Mobile

面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。

• 官方地址: https://didi.github.io/mand-mobile/#/zh-CN/home
• Github: https://github.com/didi/mand-mobile
• demo: https://didi.github.io/mand-mobile/examples/

Mint UI

基于 Vue.js 的移动端组件库,真正意义上的按需加载组件, 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化,即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

• 项目主页:http://mint-ui.github.io/#/zh-cn
• demo:http://elemefe.github.io/mint-ui/#/
• Github:https://github.com/ElemeFE/mint-ui
• 中文文档地址:http://mint-ui.github.io/docs/#/zh-cn

Framework7-Vue

• 完美的HTML框架, 构建精美的iOS & Android 应用
• Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
• 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验
• 如果你想开发 iOS 或者 Android 混合应用（Phonegap）或者你想开发 iOS 和 Google Material 风格的WEB APP，那么Framework7将会是你的首选。
• 官方地址: http://vue.framework7.cn/
• Github: https://github.com/framework7io/framework7-vue

vue-Material

移动端UI组件, material-design的风格简直太棒了，控件丰富而且好看，文档齐全，动画效果非常棒, 目前只有全英文文档

• 官方地址: https://vuematerial.io/
• GIthub: https://github.com/vuematerial/vue-material

keen-ui

Keen UI是一个带有简单API的Vue.js UI库，灵感来自Google的material-design。

• 英文文档: https://josephuspaye.github.io/Keen-UI/#/ui-alert
• Github: https://github.com/JosephusPaye/Keen-UI

Vant

Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的，主要维护也是有赞团队, Vant Weapp 是有赞移动端组件库 Vant 的小程序版本。

• 官方地址: https://youzan.github.io/vant/#/zh-CN/intro
• Github: https://github.com/youzan/vant
• vant-weapp小程序: https://github.com/youzan/vant-weapp

cube-ui

基于 Vue.js 实现的精致移动端组件库, 由滴滴内部组件库精简提炼而来

• 官方地址: https://didi.github.io/cube-ui/#/zh-CN
• 中文官网: https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
• demo: https://didi.github.io/cube-ui/example/#/

Vonic

一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。

• 中文文档: https://wangdahoo.github.io/vonic-documents/#/
• Github: https://github.com/wangdahoo/vonic
• demo: https://wangdahoo.github.io/vonic/docs/#/

Vum

基于vue2.0的移动端UI组件

• demo: http://demo.getvum.com/
• 英文文档: http://getvum.com/
• Github: https://github.com/vum-team/vum

YDUI

一个基于Vue2.x的移动端&微信UI。 -YDUI Touch

• 官方地址
• Github: https://github.com/ydcss/vue-ydui

OnsenUI-Vue

• OnsenUI 同时支持react, angular, vue三大主流框架
• 拥有大量专门为移动应用设计的ui组件
• 按照原生的ios和Android设计标准提供，提供即用型功能
• 英文文档: https://onsen.io/v2/guide/vue/
• Github: https://github.com/OnsenUI/OnsenUI

BS端UI组件

element

Element 是由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库。

• 官网: http://element.eleme.io/#/zh-CN
• 饿了么Github: http://github.com/elemefe

iview

一套基于 Vue.js 的高质量的UI组件库

• iView配套的工作流:https://github.com/icarusion/vue-vueRouter-webpack
• Github:https://github.com/iview/iview
• 官网:https://www.iviewui.com/

radon-ui

一个帮助你快速开发产品的Vue组件库，简洁好用，效率高，让你摆脱各种定制化的烦恼。基于 npm + webpack + ES6 + postcss开发, 数据驱动，简单易使用。

• 中文文档：https://luojilab.github.io/radon-ui/#!/
• Github: https://github.com/luojilab/radon-ui

ant-design-vue

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Vue 组件。
• 共享Ant Design of React设计工具体系。
• 现代浏览器和 IE9 及以上（需要 polyfills）。
• 支持服务端渲染。
• 中文文档: http://okoala.github.io/vue-antd/#!/components
• Github: https://github.com/okoala/vue-antd

N3

N3组件库致力于构建良好的Vue开发者生态圈，提供良好的开发体验。下面是其中的一些特色：

• 超过60个组件 组件列表

• 自定义样式

• 支持多种模块化范式（UMD）

• 使用ES6进行开发

• 官网: https://n3-components.github.io/N3-components/

• 中文文档: https://n3-components.github.io/N3-components/component.html

• Github: https://github.com/N3-components/N3-components

vuikit

基于uikit 3框架的网站界面响应式Vue 2 UI库。

• Github: https://github.com/vuikit/vuikit
• 英文文档: https://vuikit.js.org/#/

Bootstrap-Vue

bootstrap vue为vue.js提供了bootstrap 4组件和网格系统的最全面的实现之一，并具有广泛的自动化的wai-aria可访问性标记。

• 文档: //bootstrap-vue.github.io/docs
• Github：https://github.com/bootstrap-vue/bootstrap-vue/
• demo：https://bootstrap-vue.github.io/

AT-UI

一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品, 现代浏览器和 IE9 及以上

• 官方地址: https://at-ui.github.io/at-ui/#/zh
• Github: https://github.com/AT-UI/at-ui

Muse-UI

基于 Vue 2.0 优雅的 Material Design UI 组件库, 同时支持PC端和移动端, 支持移动端城市日历下拉选址

• 官方地址: https://muse-ui.org/#/zh-CN
• Github: https://github.com/museui/muse-ui

veui

VEUI 是一套基于 Vue.js 的商业系统组件库。采用组件库样式与逻辑分离的方式开发, VEUI 是以 ES Next 源码形式通过 ES module 格式进行发布的，需要与用户项目本身一同编译构建。VEUI 除了提供丰富的组件，还提供多个功能强大的指令及插件，帮助开发者迅速搭建基于 Vue 的应用。

• 官方地址: https://veui.dev/
• Github: https://github.com/ecomfe/veui

Semantic-UI

Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。取BEM 和 SMACSS 的精华，同时使之更易于使用。功能强大，自带广告，评论等组件

• 中文文档: https://semantic-ui.com/
• Github: https://github.com/Semantic-Org/Semantic-UI

vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

• 官方地址: https://panjiachen.gitee.io/vue-element-admin-site/zh/
• demo: https://panjiachen.github.io/vue-element-admin/#/dashboard
• Github: https://github.com/PanJiaChen/vue-element-admin

Vue-Blu

Vue-Blu是基于Vuejs和Bulma开发的开源UI组件库。旨在为PC端的前端开发(特别是中后台产品)提供一个快速且灵活的解决方案。

• 中文文档: https://chenz24.github.io/vue-blu/#/
• Github: https://github.com/chenz24/vue-blu

Vuetify

让Vue和Material Design的强大力量在开发上助您一臂之力, Vuetify 支持SSR（服务端渲染）,SPA（单页应用程序）,PWA（渐进式Web应用程序）和标准HTML页面

• 官方地址: https://vuetifyjs.com/zh-Hans/
• Github: https://github.com/vuetifyjs/vuetify

Rubik

Rubik UI 是一个基于 Vue.js 2.0+ 的开源 UI 组件库，在交互和视觉设计上遵循 Material Design 规范，适用于 PC 端和 mobile 端。

• 官方文档: https://ccforward.github.io/rubik/#/
• Github: https://github.com/ccforward/rubik

Quasar

Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：

• 响应式网站
• PWA
• 通过Apache Cordova构建移动APP
• 多平台桌面应用程序（使用Electron）
• 官方地址: https://v1.quasar-framework.org/
• Github: https://github.com/quasarframework/quasar