Element UI
開發(fā)團(tuán)隊(duì)：餓了么前端
官網(wǎng)：https://element.eleme.cn/#/zh-CN
github（ star：44.1k ）：https://github.com/ElemeFE/element
特性：
Element-UI 是目前針對于 Vue 開發(fā) PC 端項(xiàng)目的時(shí)候所使用到的一個(gè)主流 UI 庫。在座的有學(xué)習(xí) Vue 開發(fā)的同學(xué)或多或少應(yīng)該都知道 Element-UI 。那我們就從它開始聊。
? 大家有沒有想過，對于一個(gè) UI 庫來說，它是如何被廣大的開發(fā)者所接受的？或者說它是如何被用戶所接受的？
? 我認(rèn)為，一個(gè)產(chǎn)品，具體到當(dāng)前就是 Element-UI 這個(gè)庫，這個(gè)庫對于我們開發(fā)者來說就是產(chǎn)品，我們開發(fā)者就是它的用戶。而一個(gè)產(chǎn)品之所以可以被用戶所接受，所依賴的無非是三點(diǎn)：
1. 產(chǎn)品的文檔對于用戶來說足夠清晰
2. 產(chǎn)品的功能對于用戶來說足夠簡單
3. 產(chǎn)品的 UI 對于用戶來說足夠友好
? 什么意思呢？我們一個(gè)一個(gè)來解釋。
? 首先我們來看第一個(gè)：產(chǎn)品的文檔對于用戶來說足夠清晰。這是什么意思呢？大家想一下當(dāng)我們買了一個(gè)東西的時(shí)候，最初我們不知道這個(gè)東西是怎么用的？那么我們一般都會(huì)去看一下它的說明書，或者直接去網(wǎng)上搜索一些這個(gè)產(chǎn)品的資料，對吧。那么這個(gè)時(shí)候如果它的說明書寫的不清不楚，甚至有些地方寫的根本就不對。那么你如果想要把這個(gè)東西使用熟練，是不是要花費(fèi)特別大的精力。也就是我們開發(fā)者常說的，這個(gè)框架擁有了過高的學(xué)習(xí)成本，或者說這個(gè)框架學(xué)習(xí)曲線過于陡峭，不夠平滑。那么這樣的話無疑會(huì)勸退一部分用戶。對吧。
? 所以說如果一個(gè)框架如果想要被開發(fā)者廣為接受，那么一個(gè)清晰的文檔肯定是首要的條件。那么對于 Element-UI 來說，它的一個(gè)文檔就比較清晰。在組件部分，從安裝 Element-UI 到各個(gè)組件的效果描述的都是非常清楚的，每一步應(yīng)該如何做，這樣做會(huì)產(chǎn)生什么樣的結(jié)果都在文檔上描述的很清楚。這個(gè)就是一個(gè)清晰的產(chǎn)品文檔。
? 第二條：產(chǎn)品的功能對于用戶來說足夠簡單。這一條也好理解。對于我們開發(fā)者來說，當(dāng)我們使用一個(gè)框架的時(shí)候，我們想要的是什么？我們想要一個(gè)框架：你的功能要足夠的復(fù)雜，但是你的接口要足夠的簡單。什么意思呢？大家可以參照一下自己的手機(jī)。現(xiàn)在智能手機(jī)的功能已經(jīng)非常復(fù)雜了。可以打電話，可以玩游戲，可以看電影。但是一旦你熟悉了它之后，它使用起來確實(shí)非常簡單的。你不會(huì)去關(guān)心它的功能是如何實(shí)現(xiàn)的，你關(guān)心的只是是否可以通過簡單的操作來完成復(fù)雜的功能。就是這個(gè)道理放到我們開發(fā)者身上也一樣。我不關(guān)心你組件封裝的如何復(fù)雜，我所關(guān)心的只是你暴露出來的接口。
? 第三條：產(chǎn)品的 UI 對于用戶來說足夠友好。這一點(diǎn)是什么意思呢？其實(shí)這一點(diǎn)主要是對于產(chǎn)品經(jīng)理和設(shè)計(jì)師來說的。大家有過開發(fā)經(jīng)驗(yàn)的同學(xué)，特別是有過在公司工作過的同學(xué)。應(yīng)該很清楚，你的項(xiàng)目最終開發(fā)出來帳什么樣子，不是你決定的。是產(chǎn)品經(jīng)理和設(shè)計(jì)師來決定的。那設(shè)計(jì)項(xiàng)目的 UI 他們的依據(jù)是什么呢？他們會(huì)依據(jù)產(chǎn)品的特性、產(chǎn)品的定位等等，但是絕大部分的 UI 依據(jù)都是目前用戶的一個(gè)普遍審美。
? 大家有沒有發(fā)現(xiàn)對于現(xiàn)在的 App 、網(wǎng)頁甚至手機(jī)來說，他們的 UI 同質(zhì)化非常嚴(yán)重嗎？差不多都是一個(gè)風(fēng)格的，對吧。出現(xiàn)這個(gè)問題的原因就是因?yàn)榇蟊姷囊粋€(gè)審美會(huì)定位到同一塊區(qū)間，而設(shè)計(jì)根據(jù)大眾的審美來定位產(chǎn)品的樣式，所以才會(huì)出現(xiàn)這種同質(zhì)化的問題。
? 那么這個(gè)和我們開發(fā)者有什么關(guān)系呢？大家想一下，如果一個(gè) UI 庫它能夠符合大眾的普遍審美，并且提供了一種良好的交互體驗(yàn)，那么如果你是設(shè)計(jì)師的話，你會(huì)不會(huì)參照或者直接使用 UI 庫所提供的樣式。因?yàn)閷τ谶@種 UI 庫來說，它的樣式會(huì)比大部分的設(shè)計(jì)做出來的樣式還要好。
? 那么對于我們開發(fā)者來說，當(dāng)你拿到設(shè)計(jì)稿的時(shí)候，你發(fā)現(xiàn)設(shè)計(jì)稿上的樣式和 Element-UI 一樣，你是不是到 Element-UI 上直接拿過來用就可以了呀。
? 并且對于 Element-UI 它額外還提供了 自定義主題 和 國際化的功能。這些具體怎么做，文檔說的很詳細(xì)，我們就不展開說了。
? 那么總結(jié)一下 Element-UI 。
1. Element-UI 是現(xiàn)在基于 Vue 的一個(gè)非常好用的桌面端 UI 組件庫
2. 支持 @vue/cli 項(xiàng)目的直接添加，支持按需導(dǎo)入、國際化、支持自定義主題
3. 文檔清晰，學(xué)習(xí)成本低
4. 提供的組件足夠使用
5. UI 的風(fēng)格符合目前大眾的普遍審美
6. 如果你想要做一個(gè)公司級別的產(chǎn)品，那么 Element-UI 基本可以滿足需求，但是難免樣式、風(fēng)格上會(huì)同質(zhì)化嚴(yán)重
但是如果你想要弄一個(gè)自己的網(wǎng)站、自己的項(xiàng)目，并且希望在樣式上，不喜歡那么同質(zhì)化，應(yīng)該怎么呢？這個(gè)時(shí)候，你可以參考下，另外一個(gè) UI 庫，就是 vuetify。
vuetify
開發(fā)團(tuán)隊(duì)：麻省理工學(xué)院開源項(xiàng)目
官網(wǎng)：https://vuetifyjs.com/zh-Hans/
github（ star：24.1k ）：https://github.com/vuetifyjs/vuetify
特性：
? vuetify 是麻省理工學(xué)院的開源項(xiàng)目，文檔同樣支持全球化，它是基于 Android Material Design 風(fēng)格的一個(gè) vue 前端組件庫。同樣支持 @vue/cli 項(xiàng)目的直接添加。
? 不過 vuetify 的 Material Design 風(fēng)格在國內(nèi)并不是很大眾， Material Design 是由google開發(fā)的設(shè)計(jì)語言，第一次公開使用應(yīng)該是在 Android 5.0 上面，但是在國內(nèi)這種樣式風(fēng)格一直推行的效果不好。在國外這種風(fēng)格被接受的程度還可以，但是國內(nèi)你會(huì)發(fā)現(xiàn)很少見。
? 這樣就導(dǎo)致這種設(shè)計(jì)風(fēng)格不會(huì)存在大量同質(zhì)化的問題。同樣的如果你使用了這種風(fēng)格的話，也必須要承擔(dān)一定的風(fēng)險(xiǎn)。所以對于公司級項(xiàng)目來說，如果使用了 vuefity 的話，那么無形中就會(huì)為產(chǎn)品增加一些風(fēng)險(xiǎn)。不過如果你是要做一個(gè)自己的項(xiàng)目，并且希望你的項(xiàng)目擁有一些自己的個(gè)性，那么 vuetify 無疑是一個(gè)很好的選擇。
? 對于 vuetify 本身的一個(gè)功能層面上，它的文檔、它的組件都可以完全滿足我們的一個(gè)日常使用，比如，在它的 UI 組件里面，我們常用到的這些組件都是比較全的。
? 另外它還提供了一些擴(kuò)展的指令，這些指令是在 vue 的基礎(chǔ)上做的一些擴(kuò)展，可以滿足一些特定的需求。
? 總的來說，vuetify 上手的難度會(huì)比 elementUI 要高一些，主要是因?yàn)閲獾娜说乃季S和國內(nèi)的人還是有一些不同，所以這就導(dǎo)致了 vuetify 對于國內(nèi)來說會(huì)難免有一些水土不服，而產(chǎn)生兩個(gè)極端，也就是所謂的：喜歡他它的人很喜歡，討厭它的人很討厭。
? 總結(jié)一下 vuetify：
1. vuetify 是國外團(tuán)隊(duì)進(jìn)行開發(fā)的一個(gè)基于 vue 的組件庫
2. 支持 @vue/cli 項(xiàng)目的直接添加，支持按需導(dǎo)入、國際化、提供了定制功能（樣式、顏色、主題等等）
3. 文檔相對清晰，但是和國人的思維不太一樣，導(dǎo)致學(xué)習(xí)成本相對高一些
4. 提供的組件足夠使用，并且提供了 v- 開頭的擴(kuò)展指令，還有付費(fèi)專題模塊
5. UI 的風(fēng)格使用的是 Google 推出的 Material Design 的設(shè)計(jì)風(fēng)格，在國內(nèi)推廣度相對低一些
6. 使用 vuetify 在 UI 樣式上，會(huì)有一些額外的風(fēng)險(xiǎn)，但是可以避免同質(zhì)化的問題，比較適合一些個(gè)人或者需要彰顯個(gè)性的項(xiàng)目
介紹了兩個(gè)都是基于 vue 的 UI 庫。那么下面我們來看一下基于(常用于) React 的 UI 庫。
Ant Design
開發(fā)團(tuán)隊(duì)：螞蟻金服體驗(yàn)技術(shù)部
官網(wǎng)：https://ant.design/index-cn
github（ star：57.6k ）：https://github.com/ant-design/ant-design/
特性：
Ant Design 被官方定義為一種設(shè)計(jì)體系，不過設(shè)計(jì)體系這種高雅的東西，對咱們這些俗人應(yīng)該認(rèn)知不大，我們所認(rèn)知最明確的，就是這個(gè)東西能為我們的開發(fā)帶來什么幫助。所以我們下面就把它當(dāng)作一個(gè) UI 庫來看。
Ant Design 在 react 中的地位，應(yīng)該和 element UI 在 vue 中的地位是一樣的，都可以說是最火爆的 UI 庫之一。
Ant Design 同時(shí)支持 React、Vue、Angular，也就是說我們在這三個(gè)主流框架中都可以使用，但是 Ant Design 對于React 的支持是最好的，所以一般我們說到 Ant Design ，都會(huì)說他是一個(gè)基于 React UI 的一個(gè)組件庫。
? Ant Design 是阿里巴巴-螞蟻金服體驗(yàn)技術(shù)部所設(shè)計(jì)的一個(gè) UI 庫，目前最新的是 4.x 的版本，我們看它的主頁，就能夠感覺出來，一個(gè)整體的設(shè)計(jì)風(fēng)格是非常贊的。
? 同樣，像國際化、定制主題的這些功能，Ant Design 也同樣是支持的，這個(gè)沒得說，具體怎么做，大家看文檔。
? Ant Design 的文檔也非常的詳細(xì)，無論到快速上手，到各個(gè)組件的使用，都有非常詳細(xì)的文檔。
? 另外非常值得一提的就是關(guān)于 Ant Design 的社區(qū)，它的社區(qū)中提供了非常多的精品組件和一些開發(fā)中常用的一些工具推薦，這一點(diǎn)是 ElementUI 上所沒有的，可以說它的社區(qū)是真的很用心的在做的。
? 對于 Ant Design 來說，如果把它作為 React 項(xiàng)目的一個(gè)核心 UI 庫的話，那么它是完全可以勝任的，沒有一點(diǎn)問題。并且無論是它的開發(fā)團(tuán)隊(duì)也好，它的一個(gè)社區(qū)也好，都可以很好的保證該庫的一個(gè)正常的升級和迭代。
? 總結(jié)一下 Ant Design：
1. Ant Design 是阿里巴巴-螞蟻金服體驗(yàn)技術(shù)部所設(shè)計(jì)的一個(gè) UI 庫，一般用于基于 React 的項(xiàng)目
2. 支持在 create-react-app（React 官方腳手架） 項(xiàng)目的直接添加，支持按需導(dǎo)入、國際化、提供了定制主題
3. 文檔清晰，學(xué)習(xí)成本低
4. 提供的組件足夠使用，并且提供了精品社區(qū)服務(wù)
5. UI 的風(fēng)格符合目前大眾的普遍審美
6. 如果你想要做一個(gè)公司級別的產(chǎn)品，那么 Ant Design 基本可以滿足需求，但是難免樣式、風(fēng)格上會(huì)同質(zhì)化嚴(yán)重
上面說的都是一些對于現(xiàn)階段，也就是 web 3.0 階段的 UI 庫，然后我們來看兩個(gè)適用于 web 2.0 階段的 UI 庫。
Bootstrap
開發(fā)團(tuán)隊(duì)：Twitter
官網(wǎng)：https://www.bootcss.com/
github（ star：139k ）：https://getbootstrap.com/
特性：
? Bootstrap 前端的同學(xué)應(yīng)該沒有不知道。在之前的 web 2.0 階段，可以說是大名鼎鼎了。我們這里提到了 web 3.0 和 web 2.0 ，那么給大家解釋一下。
? 整個(gè)前端開發(fā)的歷史，我把它分成了三個(gè)階段，web 1.0 、web 2.0 和 web 3.0。
? 對于 web 1.0 來說， 指的就是 html、css、js的那個(gè)階段，整個(gè)前端的交互還都是以一種原生的方式進(jìn)行展示，這個(gè)時(shí)候還沒有前端工程師的概念，或者說這個(gè)概念很稀薄，大部分的前端工作都是由后端的工程師來兼職進(jìn)行開發(fā)的。
? 而 web 2.0 階段，最大的標(biāo)志就是 jQuery、bootstrap、還有各種模板引擎的庫開始出現(xiàn)，這個(gè)時(shí)候開始逐漸有了前端開發(fā)工程師的崗位，但是前端依然不夠興盛，因?yàn)殡m然這些新出現(xiàn)的東西使前端的開發(fā)有了一些壁壘，但是這種壁壘明顯不夠堅(jiān)固，并且這些庫并沒有帶來太大的本質(zhì)上的變化，更多的是一種增強(qiáng)。
? 而 web 3.0 階段，最大的標(biāo)志就是 angular、react、vue 的出現(xiàn)。從最初 google 推出了 angular 1， angular 1 一出現(xiàn)，確實(shí)可以說是驚艷。他把之前零零碎碎的內(nèi)容，比如數(shù)據(jù)驅(qū)動(dòng)，比如模板語法，比如模塊化的東西進(jìn)行了整合，變成了一個(gè)大一統(tǒng)的框架。但是因?yàn)?angular 1 屬于一個(gè)最初的嘗試，所以在設(shè)計(jì)上還有很多不完善的地方，這就導(dǎo)致了 angular 2的變化過大，成了一個(gè)斷層，就引起了很多人的不滿。
? 而這個(gè)時(shí)候 react、vue 也開始逐漸崛起，從 angular 手中搶走了大量的開發(fā)者。而 react、vue 所推崇的這種漸進(jìn)式框架的方案，明顯更被開發(fā)者所接受，所以就導(dǎo)致現(xiàn)在 react 和 vue 的開發(fā)者基數(shù)要遠(yuǎn)遠(yuǎn)的大于 angular了。不過就算是這樣，沒有人可以否認(rèn) angular 所帶來的貢獻(xiàn)。
? angular、react、vue 完全提高了前端的壁壘，隨之也逐漸出現(xiàn)了很多的周邊庫，比如 前端路由庫、全局狀態(tài)管理工具、webpack 這種大一統(tǒng)的前端打包工具。
? 這些內(nèi)容的出現(xiàn)，就導(dǎo)致了前端的學(xué)習(xí)成本變得越來越高，也就使得前端的壁壘變得越來越堅(jiān)固。
? 再加上用戶對于體驗(yàn)的要求越來越高，后端工程師對此逐漸開始無力，這就導(dǎo)致前端工程師開始出現(xiàn)，前后端的項(xiàng)目分離變成了現(xiàn)在的正統(tǒng)，大家各司其事，后端的工程師主要做后端的內(nèi)容，前端工程師主要做前端的內(nèi)容。
? 這就是整個(gè)前端的一個(gè)大概的發(fā)展歷史，而對于 bootstrap 來說，他在 web 2.0 的時(shí)候，是頂頂大名的。使用它來開發(fā)的項(xiàng)目不計(jì)其數(shù)啊，主要原因就是因?yàn)樗銐蚝唵巍⒁子茫⑶宜囊粋€(gè)設(shè)計(jì)風(fēng)格在當(dāng)時(shí)相當(dāng)超前的。
? 不過在現(xiàn)在的階段，bootstrap 已經(jīng)開始被使用的越來越少了，哪怕是推出了 bootstrap vue 這種擁抱現(xiàn)階段的庫，也只能說是表現(xiàn)平平。
? 但是對于 bootstrao 來說，它就完全沒有價(jià)值了嗎？不是的。如果你的項(xiàng)目需要兼容到 IE8，那么你就沒有辦法使用之前咱們提到的那些 UI 庫，這個(gè)時(shí)候， bootstrap 這種純 css 的庫，會(huì)給你帶來很大的幫助。關(guān)于 bootstrap，大家應(yīng)該都會(huì)比較熟悉了，我們就不詳細(xì)說了。
? 總結(jié)一下 bootstrap：
1. Bootstrap 是 Twitter 所設(shè)計(jì)的一個(gè) UI 庫，以 css 樣式為主，也提供了一些組件的功能需要配合 js 來進(jìn)行使用
2. 使用簡單，文檔清晰，學(xué)習(xí)成本低
3. 提供的組件相對較少
4. 可以只使用框架中的 css 樣式，可嵌入性較高
5. UI 的風(fēng)格符合目前大眾的普遍審美
6. 適合使用在對游覽器兼容性有要求的項(xiàng)目中
除了 bootstrap 之外，另外一個(gè) web 2.0 階段的 UI 庫就是 layui 。
layui
開發(fā)團(tuán)隊(duì)：自由職業(yè)者（賢心）
官網(wǎng)：https://www.layui.com/
github（ star：21.1k ）：https://github.com/sentsin/layui/
特性：
? layui 是自由職業(yè)者（賢心）進(jìn)行開發(fā)的一個(gè)前端庫，最低可以兼容到 IE8 ，官網(wǎng)介紹它是一個(gè)更加適合服務(wù)端工程師來開發(fā)前端頁面的庫，但是對于前端工程師來說，如果你的項(xiàng)目要兼容到 IE8 的話，那么使用 layui 也是一個(gè)很好的選擇。
? layui 的主要內(nèi)容被分成了兩個(gè)大的部分，1.頁面元素。 2.內(nèi)置模塊
? 對于頁面元素來說，主要就是一些 css 的樣式，也就是一些定義好的 css 樣式類，這一點(diǎn)和 bootstrap 很像。
? 對于內(nèi)置模塊來說，是 layui 比較推崇的一個(gè)概念。比如按需引入的模塊化。當(dāng)然這個(gè)概念對于現(xiàn)在的前端開發(fā)來說，已經(jīng)變成了一個(gè)普遍的功能點(diǎn)了。比如我們前面說到的 Element-UI、vuetify、And Design 都擁有這個(gè)功能。 但是在 web 2.0 階段的時(shí)候，這個(gè)模塊化的功能還是比較先進(jìn)的。
? 至于 layui 中所涉及到的樣式部分，按照現(xiàn)在的一個(gè)審美來說依然是不過時(shí)的，所以說對于現(xiàn)在來說，如果你對前端的技術(shù)了解的并不深，或者說你是一個(gè)服務(wù)端工程師，那么想要開發(fā)一個(gè)前端頁面的話，layui 依然是一個(gè)比較好的選擇。
? 總結(jié)下 layui：
1. layui 是 自由職業(yè)者（賢心）進(jìn)行開發(fā)的一個(gè)前端庫，最低可以兼容到 IE8
2. 設(shè)置的初衷是讓非前端的工程師可以很方便的開發(fā)前端頁面
3. 使用簡單，文檔清晰，學(xué)習(xí)成本低
4. 提供頁面元素和模塊化的概念
5. UI 的風(fēng)格并不過時(shí)
6. 適合非專業(yè)前端工程師使用
之前看了很多桌面端的組件庫了，那么下面我們來看幾個(gè)移動(dòng)端的 UI 組件庫。
Vant-UI
開發(fā)團(tuán)隊(duì)：有贊前端團(tuán)隊(duì)
官網(wǎng)：https://youzan.github.io/vant/#/zh-CN/
github（ star：12.9k ）：https://github.com/youzan/vant
特性：
? Vant-UI 是有贊前端團(tuán)隊(duì)開發(fā)的一個(gè)基于 vue 的移動(dòng)端組件庫。不過對于移動(dòng)端組件庫來說，它和桌面端有非常多的不同。
? 比如說，官方的文檔，對于移動(dòng)端的組件庫文檔來說，大部分都會(huì)把整個(gè)項(xiàng)目中所有的組件通過一個(gè)類似于手機(jī)的UI形式給一次性全部羅列出來。
這個(gè)在 PC 端的 UI 庫中，大家應(yīng)該很少見吧。我個(gè)人是比較喜歡這種方式的，因?yàn)檫@樣它可以讓開發(fā)者很方便的知道，這個(gè) UI 庫它的各個(gè)組件的樣式效果，是否可以滿足個(gè)人的需求。
? 還有關(guān)于兼容性方面，因?yàn)槭且苿?dòng)端的組件庫，那么它都會(huì)運(yùn)行在手機(jī)上，而對于手機(jī)來說就不會(huì)存在 PC 端瀏覽器 IE 兼容性的問題了。更多的是關(guān)于手機(jī)系統(tǒng)版本的問題。咱們就以 Vant-UI 為例，他在瀏覽器支持這方便介紹說，現(xiàn)代瀏覽器以及 Android 4.0，IOS 8.0 以上的系統(tǒng)都支持，那么以咱們現(xiàn)在的這個(gè)時(shí)間點(diǎn)來說，基本上就不會(huì)存在兼容性的問題了。
? 還有就是組件的樣式風(fēng)格上，因?yàn)閷τ谝苿?dòng)端設(shè)備來說，畢竟大小、尺寸、操作方式都不一樣，所以在 UI 的一個(gè)整體設(shè)計(jì)風(fēng)格上，肯定和 PC 端上有很大的不同。
? 然后還有最重要的一點(diǎn)，也是考驗(yàn)移動(dòng)端組件庫的一個(gè)非常重要的難點(diǎn)。就是流暢性的問題。這個(gè)問題在桌面端組件庫上一般不會(huì)是一個(gè)太大的難點(diǎn)。但是在移動(dòng)端上面就不太一樣了。手機(jī)使用的流暢度的問題，在咱們現(xiàn)在依然還是一個(gè)大家都非常關(guān)注的點(diǎn)，并且對于現(xiàn)在的用戶來說，對于移動(dòng)端流暢度的要求，要更加苛刻，這種苛刻的程度遠(yuǎn)高于 PC 端。所以說如果你開發(fā)了一個(gè) web app 或者 web 端網(wǎng)頁的話，如果很卡，那么無論你的 UI 樣式做的再好，估計(jì)也會(huì)大大減分的。
? 所以說對于一個(gè)移動(dòng)端的 UI 庫來說，它如果要做好其實(shí)要比 PC 端的組件庫難度更大上一些。而 Vant-UI 在基于 Vue 的移動(dòng)端組件庫中，各方面都是非常不錯(cuò)的。無論是文檔、組件的豐富性、易用性上，我個(gè)人都比較喜歡。
? 另外對于 Vant-UI 來說他還提供了幾個(gè)非常有意思的組件，我們來看一下。
? 大家打開 Vant-UI的官網(wǎng)，在業(yè)務(wù)組件部分，它提供了一些目前商城類系統(tǒng)所常用到的業(yè)務(wù)模塊。比如商品規(guī)格，像這種擁有相對固式樣式的業(yè)務(wù)，它提供了成套的業(yè)務(wù)組件，并且這些業(yè)務(wù)組件，我們也可以使用 Vue 中的 插槽 功能去進(jìn)行一些定制這個(gè)我覺得是非常非常好的一個(gè)功能。
? 總結(jié)一下 Vant-UI：
1. Vant-UI 是有贊前端團(tuán)隊(duì)所設(shè)計(jì)的一個(gè) UI 庫，一般用于基于 Vue 的移動(dòng)端項(xiàng)目
2. 支持 @vue/cli 項(xiàng)目的直接添加，支持按需導(dǎo)入、國際化、提供了定制功能（樣式、顏色、主題等等）
3. 文檔清晰，學(xué)習(xí)成本低
4. 提供的組件足夠使用，性能不錯(cuò)，并且提供了基于商城業(yè)務(wù)的成套組件
5. UI 的風(fēng)格以及交互操作可以達(dá)到現(xiàn)在的主流標(biāo)準(zhǔn)
6. 適用于 web app 或者 基于移動(dòng)端的網(wǎng)頁開發(fā)
然后我們來看另外一個(gè)移動(dòng)端組件庫
Framework7
開發(fā)團(tuán)隊(duì)：獨(dú)立開發(fā)者（github名：Vladimir Kharlampidi）
官網(wǎng)：http://www.framework7.cn/
github（ star：15.3k ）：https://github.com/framework7io/framework7/
特性：
? Framework7 是獨(dú)立開發(fā)者開源的一個(gè)全功能框架。可以用來構(gòu)建 IOS、Android和桌面應(yīng)用程序。注意我們這里說的是框架，不再是一個(gè)簡單的 UI 組件庫了。
? 由組件庫變成了框架，那么顯然帶來的問題就是復(fù)雜度直線上升了。但是復(fù)雜度上升的同時(shí)，它能夠給我們帶來的東西也完全不一樣了。打開官網(wǎng)，我們一起來看一下。
? 打開官網(wǎng)，首先我們能看到它的一個(gè)功能演示。我們主要看 IOS 和 android 這兩個(gè)部分。
? Framework7 針對 IOS 和 Android 的不同風(fēng)格提供了不同的展示樣式。對于 IOS 是標(biāo)準(zhǔn)的蘋果風(fēng)。對于 Android 則提供了基于 Material Design 的一種設(shè)計(jì)風(fēng)格。并且 Framework7 提供了一種很牛的功能，這個(gè)功能是其他的 UI 組件庫所沒有的，那就是基于移動(dòng)端不同頁面的一個(gè)過場動(dòng)畫。
? 對于 Framework7 因?yàn)樗且粋€(gè)框架，所以說它不需要再依賴于向 vue、react 這種其他的框架，它本身就可以完整的去開發(fā)一個(gè)項(xiàng)目。同時(shí)如果你想要基于 vue 或者 react 來配合 Fragment7 使用的話，那么也是可以的。Fragment7 同時(shí)也提供了 Framework7 Vue 和 Framework7 React 這兩個(gè)框架。
? 另外對于 Framework7 提供了很多新的概念，比如 Framework7 CLI 、DOM 7 等等，咱們再這里就不在詳細(xì)說了。
? 總結(jié)一下 Framework7 ：
1. Framework7 是獨(dú)立開發(fā)者所設(shè)計(jì)的一個(gè)全功能框架。可以用來構(gòu)建 IOS、Android和桌面應(yīng)用程序。
2. 本身是一個(gè)獨(dú)立的框架，同時(shí)也可以配合 vue 和 react 來使用。整體比較重
3. 文檔漢化不是很好，具有一定的學(xué)習(xí)成本。
4. 提供的功能組件、交互視圖足夠強(qiáng)大，并且也有很多新的概念，性能優(yōu)秀。
5. UI 的風(fēng)格以及交互操作可以達(dá)到原生 APP 95%的體驗(yàn)
6. 適用于沒有資深前端開發(fā)工程師的公司使用。
最后我們來看一個(gè)由 微信團(tuán)隊(duì)開發(fā)的 weui
WEUI
開發(fā)團(tuán)隊(duì)：微信官方團(tuán)隊(duì)
官網(wǎng)：https://weui.io/
github（ star：24.2k ）：https://github.com/Tencent/weui
特性：
? weui 是微信官方團(tuán)隊(duì)開發(fā)的一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫。提供了一些組件和樣式的簡單使用。主要應(yīng)用于微信內(nèi)部網(wǎng)頁和微信小程序。
? 對于 weui 的文檔沒有放到官網(wǎng)上，而是在 guthub 中。這個(gè)大家注意下，別找不到文檔就可以。不過微信的文檔是相對比較亂的，并且有一些示例代碼的地址已經(jīng)打不開了（2020-03 時(shí)測試）。這就導(dǎo)致大家如果想要學(xué)習(xí) weui 的使用，那么只能從 github 上下載一下實(shí)例代碼來學(xué)習(xí)了。
? weui 的話我們不做過多介紹，簡單總結(jié)下：
1. weui 是微信官方團(tuán)隊(duì)開發(fā)的一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫。
2. 因?yàn)橹粦?yīng)對微信內(nèi)部網(wǎng)頁和微信小程序，所以所提供的功能相對簡單。
3. 文檔稍微亂一些。
4. 提供的功能組件有限，主要還是應(yīng)對場景的問題。
5. UI 的風(fēng)格同微信原生視覺體驗(yàn)一致
6. 適用微信內(nèi)部網(wǎng)頁和微信小程序。
合理的運(yùn)用 UI庫 ， 可以大大的提升我們的開發(fā)效率，并且保證我們的項(xiàng)目設(shè)計(jì)維持在一個(gè)平均水平之上。
但是合理的使用，并不代表著完全依賴，UI 庫 可以幫助我們解決設(shè)計(jì)上 80% 的問題，但是 UI 庫也會(huì)給我們帶來一些限制，比如風(fēng)格上和設(shè)計(jì)上。
所以我們大家需要合理的看待 UI 庫的存在。
作者：LGD_Sunday
