推荐基于vuejs的前端UI框架

1.前言

为何要使用框架？
这个问题不太说的清楚。近年来随着web应用的业务复杂化和多元化，技术栈变化很大。
但是使用框架的优势很明显：比如学习途径多，文档完善；框架机制和体系完善；开发周期缩短，成本低；框架维护性高，兼容性比较好；很多公司好招人等等。

2.网站资源

基于vuejs的ui框架

mint-ui 官网：https://mint-ui.github.io/#!/zh-cn
mint-ui github：https://github.com/ElemeFE/mint-ui

cube-ui 官网：https://didi.github.io/cube-ui/#/zh-CN
cube-ui github：https://github.com/didi/cube-ui/

iview-ui 官网：https://www.iviewui.com
iview-ui github： https://github.com/TalkingData/iview-weapp

element-ui 官网：http://element-cn.eleme.io/#/zh-CN
element-ui github：https://github.com/ElementUI/element-starter

at-ui 官网：https://at-ui.github.io/at-ui/#/zh
at-ui github：https://github.com/at-ui/at-ui/issues

vant-ui 官网：https://youzan.github.io/vant/#/zh-CN/intro
vant-ui github: https://github.com/youzan/vant

nutui 官网：https://nutui.jd.com/
nutui github: https://github.com/jdf2e/nutui

其他框架

ionic 官网：https://ionicframework.com/
ionic 中文社区：http://www.ionic.wang/

layui 官网：https://www.layui.com
layui github: https://github.com/sentsin/layui/

weui 官网：https://weui.io/](https://weui.io/
weui github：https://github.com/weui/weui.git

sui 官网：http://m.sui.taobao.org/
sui github：https://github.com/sdc-alibaba/SUI-Mobile

amaze-ui 官网：http://amazeui.org/
amaze-ui github：https://github.com/zordius/lightncandy

flutter-ui 官网：http://doc.flutter-dev.cn
flutter-ui github：https://github.com/flutter/flutter

3.ui框架

3.1.MintUI

mint ui是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。

特性介绍

• Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

• 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

• 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

• 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

官网：https://mint-ui.github.io/#!/zh-cn
Github: https://github.com/ElemeFE/mint-ui/

注意：有个缺点就是组件使用示例不是很详细，有很多地方晦涩难懂。

3.2.CubeUI

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

特性

• 质量可靠
  由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。

• 体验极致
  以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。

• 标准规范
  遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。

• 扩展性强
  支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

官网：https://didi.github.io/cube-ui/#/zh-CN
Github: https://github.com/didi/cube-ui/

3.3.ElementUI - PC端推荐

Element是饿了么前端开源维护的Vue UI组件库，组件齐全，基本涵盖后台管理系统所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。

设计原则

• 一致性 Consistency
  与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
  在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

• 反馈 Feedback
  控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

• 效率 Efficiency
  简化流程：设计简洁直观的操作流程；
  清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
  帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

• 可控 Controllability
  用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

官网：http://element-cn.eleme.io/#/zh-CN
Github：https://github.com/ElementUI/element-starter

3.4.iViewUI

iview ui是一个强大的ui库基于vue，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。

特性

• 高质量、功能丰富
• 友好的 API ，自由灵活地使用空间
• 细致、漂亮的 UI
• 事无巨细的文档
• 可自定义主题

官网：https://www.iviewui.com
Github: https://github.com/TalkingData/iview-weapp

2.5.AtUI

at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风格。

官网：https://at-ui.github.io/at-ui/#/zh
Github：https://github.com/at-ui/at-ui/issues

3.5.VantUI - H5推荐

vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

特性

• 50+ 个经过有赞线上业务检验的组件
• 80%+ 单元测试覆盖率
• 完善的文档和示例
• 支持 babel-plugin-import
• 支持 TypeScript
• 支持 SSR

官网：https://youzan.github.io/vant/#/zh-CN/intro
Github: https://github.com/youzan/vant

3.6.Nutui

NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。

特性

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