Element UI
簡介
•Element，一套為開發者、設計師和産品經理準備的基于 Vue 2.0 的桌面端元件庫。•元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：46.9k。•免費開源，不過最近發現已經幾個月不維護了，issues 也 Closed，如果你後面用上了 Vue3.0，那麼就不能繼續使用這一套 UI 架構，因為容易出現許多的問題•解決方法：
•新的項目的話可以考慮其他的 UI 架構：
•vuetify[1]•Ant Design of Vue[2]
•Fork 一份自己維護。
适用場景
•基于 Vue 的 SPA PC 項目。
官網位址
•Element UI 文檔[3]•Element UI Github[4]
View UI
簡介
•一套基于 Vue.js 的高品質 UI 元件庫。•View UI，即原先的 iView，是一套基于 Vue.js 的開源 UI 元件庫，主要服務于 PC 界面的中背景産品。•從 2019 年 10 月起正式更名為 View UI，并使用全新的 Logo。•免費開源，元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：
•iView UI：46.9k。•View UI：1.8k。
适用場景
•基于 Vue 的 SPA PC 項目。
官網位址
•View UI 4.x 文檔[5]•iView UI 2.x 文檔[6]•View UI Github[7]•iView UI Github[8]
Ant Design
簡介
•
antd
是基于 Ant Design 設計體系的 React UI 元件庫，主要用于研發企業級中背景産品。•免費開源，元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：62.8k。•個人對于 TimePicker 時間選擇框元件裡的滾動條感覺體驗不好。
适用場景
•基于 React 的 SPA PC 項目。
官網位址
•Ant Design 文檔[9]•Ant Design Github[10]
Ant Design of Vue
簡介
•Ant Design of Vue 是 Ant Design 的 Vue 實作，開發和服務于企業級背景産品。•如果你想從 Element UI 轉走，可以考慮此 UI 架構，也可考慮 Vuetify[11]。•免費開源，元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：11.4k。
适用場景
•基于 Vue 的 SPA PC 項目。
官網位址
•Ant Design of Vue 文檔[12]•Ant Design of Vue Github[13]
Material-UI
簡介
•世界上最受歡迎的 React UI 架構(吹的)，更快速、更簡便的 web 開發。•免費開源，元件豐富，可看的界面主題豐富，相對于國内的 Element UI 或 Ant Design，文檔不夠直白，主要是由于國外的思維習慣和國人的不太一樣。•Github 的 Star：60.4k。
适用場景
•基于 React 的 SPA PC 項目。
官網位址
•Material-UI 文檔[14]•Material-UI Github[15]
Vuetify
簡介
•Vuetify 是一個 Vue UI 庫，包含手工制作的精美材料元件。不需要設計技能 - 建立令人驚歎的應用程式所需的一切都觸手可及。•Vuetify 是 Vue.js 的頭号元件庫，尤小右的推薦，可以直接使用
vue add vuetify
安裝。•免費開源，元件豐富，相對于國内的 Element UI 或 Ant Design，文檔不夠直白，主要是由于國外的思維習慣和國人的不太一樣。•Github 的 Star：27.2k。
适用場景
•基于 Vue 的 SPA PC 項目。
官網位址
•Vuetify 文檔[16]•Vuetify Github[17]
Vant
簡介
•輕量、可靠的移動端 Vue 元件庫。•免費開源，元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：14.7k。•體驗極佳，目前是我認為基于 Vue 的 H5 UI 架構中最好之一。
适用場景
•基于 Vue 的 SPA H5 項目。
官網位址
•Vant 文檔[18]•Vant Github[19]
Vant Weapp
簡介
•Vant Weapp 是移動端 Vue 元件庫 Vant 的小程式版本，兩者基于相同的視覺規範，提供一緻的 API 接口，助力開發者快速搭建小程式應用。•免費開源，元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：13.4k。
适用場景
•微信小程式項目。
官網位址
•Vant Weapp 文檔[20]•Vant Weapp Github[21]
MUI
簡介
•最接近原生 APP 體驗的高性能前端架構。•免費開源，元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：12.9k。•優秀的 Dcloud[22] 平台的一款産品，不過在開發 Hybrid APP 還存在一些 BUG，可以為 WebApp 提供頁面切換效果，前提是你使用的打包平台是 Dcloud。
适用場景
•5 + APP 項目。•WebApp 項目。
官網位址
•MUI 文檔[23]•MUI Github[24]
Uni-UI
簡介
•uni-ui 是 DCloud 提供的一個跨端 ui 庫，它是基于 vue 元件的、flex 布局的、無 dom 的跨全端 ui 架構。•uni-ui 不包括基礎元件，它是基礎元件的補充。•免費開源，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：742。•優秀的 Dcloud[25] 平台的一款産品，如果你使用 uni-app[26] 架構開發跨多端項目，那麼此 UI 架構可以是你的好幫手。•跨多端方案：
•基于 Vue 的跨多端方案 uni-app[27]。•基于 React 的跨多端方案 taro[28]。
适用場景
•基于 Vue 的跨多端項目，例如：跨 APP 端(Android 和 IOS)，小程式端，H5，快應用。•單個端項目。
官網位址
•Uni-UI 文檔[29]•Uni-UI Github[30]
WeUI
簡介
•這是一套基于樣式庫 weui-wxss 開發的小程式擴充元件庫，同微信原生視覺體驗一緻的 UI 元件庫，由微信官方設計團隊和小程式團隊為微信小程式量身設計，令使用者的使用感覺更加統一。•免費開源，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：24.9k。•微信小程式的官方 UI 元件庫。
适用場景
•微信小程式項目。
官網位址
•WeUI 文檔[31]•WeUI Github[32]
iView Weapp
簡介
•一套高品質的微信小程式 UI 元件庫。•元件豐富，樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：5.7k。
适用場景
•微信小程式項目。
官網位址
•iView Weapp 文檔[33]•iView Weapp Github[34]
MINE-H5-UI
簡介
•一款輕量級、子產品化基于 VUE 的 H5 前端 UI 元件庫。•樣式風格簡約，文檔講解詳細，上手簡單，Github 的 Star：1(還是作者自己點的)。•1.x 版本的元件源碼過于簡單，你可以直接複制你所需要的元件檔案夾，複制到你的項目中的 components 目錄即可使用，進而可以修改元件内容來滿足你的需求。
适用場景
•基于 VUE 的 SPA H5 項目。
官網位址
•MINE-H5-UI 文檔[35]•MINE-H5-UI Github[36]
References
[1]
vuetify: #vuetify
[2]
Ant Design of Vue: #antDesignVue
[3]
Element UI 文檔: https://element.eleme.cn/#/zh-CN
[4]
Element UI Github: https://github.com/ElemeFE/element
[5]
View UI 4.x 文檔: https://www.iviewui.com/
[6]
iView UI 2.x 文檔: http://v2.iviewui.com/
[7]
View UI Github: https://github.com/view-design/ViewUI
[8]
iView UI Github: https://github.com/iview/iview
[9]
Ant Design 文檔: https://ant.design/index-cn
[10]
Ant Design Github: https://github.com/ant-design/ant-design/
[11]
Vuetify: #vuetify
[12]
Ant Design of Vue 文檔: https://www.antdv.com/docs/vue/introduce-cn/
[13]
Ant Design of Vue Github: https://github.com/vueComponent/ant-design-vue/
[14]
Material-UI 文檔: https://material-ui.com/zh/
[15]
Material-UI Github: https://github.com/mui-org/material-ui
[16]
Vuetify 文檔: https://vuetifyjs.com/zh-Hans/
[17]
Vuetify Github: https://github.com/vuetifyjs/vuetify
[18]
Vant 文檔: https://youzan.github.io/vant/#/zh-CN/home
[19]
Vant Github: https://github.com/youzan/vant
[20]
Vant Weapp 文檔: https://youzan.github.io/vant-weapp/#/intro
[21]
Vant Weapp Github: https://github.com/youzan/vant-weapp
[22]
Dcloud: https://www.dcloud.io/
[23]
MUI 文檔: https://dev.dcloud.net.cn/mui/
[24]
MUI Github: https://github.com/dcloudio/mui
[25]
Dcloud: https://www.dcloud.io/
[26]
uni-app: https://uniapp.dcloud.net.cn/
[27]
uni-app: https://uniapp.dcloud.net.cn/
[28]
taro: https://taro.aotu.io/
[29]
Uni-UI 文檔: https://uniapp.dcloud.net.cn/component/README?id=uniui
[30]
Uni-UI Github: https://github.com/dcloudio/uni-ui
[31]
WeUI 文檔: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
[32]
WeUI Github: https://github.com/Tencent/weui
[33]
iView Weapp 文檔: https://weapp.iviewui.com/
[34]
iView Weapp Github: https://github.com/TalkingData/iview-weapp
[35]
MINE-H5-UI 文檔: https://mineh5ui.biaov.cn/#/
[36]
MINE-H5-UI Github: https://github.com/biaov/MINE-H5-UI