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
其他框架
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