最近因?yàn)橐驗(yàn)轫?xiàng)目的原因，一直在尋找一款合適的前端模版，之前的 Vue 前端頁(yè)面都是自己寫(xiě)的，寫(xiě)多了就煩了，因?yàn)楣δ芏疾畈欢?，?xiě)來(lái)寫(xiě)去就沒(méi)意思了。

所以在新項(xiàng)目中想看看市面上的 Vue 后臺(tái)管理模版，找個(gè)現(xiàn)成的，改一改基本就 OK 了，團(tuán)隊(duì)也省事一些。

老實(shí)說(shuō)，Vue 的生態(tài)還是相當(dāng)豐富的，經(jīng)典的、新生的后臺(tái)管理框架都有，我這里和大家分享我們這次重點(diǎn)比較的三個(gè)。

vue-element-admin

• GitHub 地址：https://github.com/PanJiaChen/vue-element-admin
• 演示地址：https://panjiachen.github.io/vue-element-admin

這個(gè)項(xiàng)目名氣還是挺大的，在我剛開(kāi)始做 vhr 的時(shí)候，就有了解過(guò)這個(gè)項(xiàng)目，那個(gè)時(shí)候這個(gè)項(xiàng)目才剛剛開(kāi)發(fā)沒(méi)多久，star 都沒(méi)幾個(gè)，現(xiàn)在已然混成一方霸主了。

vue-element-admin 是一個(gè)后臺(tái)前端解決方案，它基于 vue 和 element-ui 實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了 i18n 國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。

可以說(shuō)，這個(gè)項(xiàng)目的功能還是比較全的，它里邊將一些常見(jiàn)的功能模塊如權(quán)限管理等都做好了，有的時(shí)候，你甚至?xí)X(jué)得這個(gè)項(xiàng)目有些臃腫。

我們來(lái)看一張效果圖：

image

這個(gè)開(kāi)源項(xiàng)目也是我們這里最終選定的方案，選定它有幾方面的原因：

1. 這個(gè)項(xiàng)目的開(kāi)發(fā)時(shí)間較早，目前相對(duì)來(lái)說(shuō)可能 BUG 較少，比較穩(wěn)定。
2. 該項(xiàng)目目前依然非?；钴S，作者還在不斷的完善。
3. 功能齊全，和其他項(xiàng)目相比，功能上基本沒(méi)有劣勢(shì)。
4. 相對(duì)于其他 UI 框架，ElementUI 使用更多一些，這對(duì)于一個(gè)商用項(xiàng)目還是非常重要的。

當(dāng)然，使用開(kāi)源項(xiàng)目肯定不可能完全契合自己的需求的，這種就要在開(kāi)發(fā)中，再去慢慢克服了。

ant-design-vue-pro

• GitHub 地址：https://github.com/vueComponent/ant-design-vue-pro
• 演示地址：https://preview.pro.loacg.com

這個(gè)也是我們當(dāng)時(shí)重點(diǎn)比較的項(xiàng)目之一。

Ant Design Pro 是一個(gè)企業(yè)級(jí)中后臺(tái)前端/設(shè)計(jì)解決方案，秉承 Ant Design 的設(shè)計(jì)價(jià)值觀，致力于在設(shè)計(jì)規(guī)范和基礎(chǔ)組件的基礎(chǔ)上，繼續(xù)向上構(gòu)建，提煉出典型模板/業(yè)務(wù)組件/配套設(shè)計(jì)資源，進(jìn)一步提升企業(yè)級(jí)中后臺(tái)產(chǎn)品設(shè)計(jì)研發(fā)過(guò)程中的『用戶』和『設(shè)計(jì)者』的體驗(yàn)。隨著『設(shè)計(jì)者』的不斷反饋，持續(xù)迭代，逐步沉淀和總結(jié)出更多設(shè)計(jì)模式和相應(yīng)的代碼實(shí)現(xiàn)。

我們來(lái)看個(gè)效果圖：

image

這個(gè)項(xiàng)目也很優(yōu)秀，但是最終卻“落榜”了，主要是考慮到以下幾個(gè)原因：

1. 這個(gè)項(xiàng)目看起來(lái)沒(méi)有 vue-element-admin 那么“臃腫”，當(dāng)然也意味著它的功能比較少。
2. ant design 本身發(fā)展時(shí)間挺久了，但是一直都是跟 React 玩，去年才開(kāi)始支持 Vue，這也是這個(gè) Ant Design Pro 看起來(lái)比較簡(jiǎn)單的原因。
3. 這個(gè)項(xiàng)目權(quán)限部分的代碼，和 vue-element-admin 具有高度相似性，如出一轍，所以還不如直接上 vue-element-admin。

話說(shuō)回來(lái)，無(wú)論用哪個(gè)開(kāi)源項(xiàng)目，想讓項(xiàng)目契合自己的實(shí)際應(yīng)用場(chǎng)景，都是需要大刀闊斧的修改的，開(kāi)源項(xiàng)目拿來(lái)直接就能用的很少，從這個(gè)角度講，其實(shí)用哪個(gè)都無(wú)所謂，反正自己都還要改不少東西。但是由于只能選擇一個(gè)，我們還是選擇了更懂 Vue 的 vue-element-admin。

iview-admin

• GitHub 地址：https://github.com/iview/iview-admin
• 演示地址：https://admin.iviewui.com

iView-admin 是 iView 生態(tài)中的成員之一，是一套采用前后端分離開(kāi)發(fā)模式，基于 Vue 的后臺(tái)管理系統(tǒng)前端解決方案。iView-admin2.0 脫離 1.x 版本進(jìn)行重構(gòu)，換用 Webpack4.0 + Vue-cli3.0 作為基本開(kāi)發(fā)環(huán)境。內(nèi)置了開(kāi)發(fā)后臺(tái)管理系統(tǒng)常用的邏輯功能，和開(kāi)箱即用的業(yè)務(wù)組件，旨在讓開(kāi)發(fā)者能夠以最小的成本開(kāi)發(fā)后臺(tái)管理系統(tǒng)，降低開(kāi)發(fā)量。

看慣了 ElementUI ，偶爾看一看 iview 或者 ant design，感覺(jué)還蠻清新的。

來(lái)看一看它的效果圖：

image

老實(shí)說(shuō)，這些框架同質(zhì)化太嚴(yán)重了，除了 UI 不一樣，其他的基本上沒(méi)啥區(qū)別，所以我們最終還是選擇了更加經(jīng)典的 vue-element-admin。

我們主要是在這三款中進(jìn)行比較的，所以這里主要和大家介紹這三個(gè)，小伙伴們要是用過(guò)其他好用的，歡迎留言區(qū)提出來(lái)哦～

如何學(xué)習(xí)

最后我再啰嗦一句，這種前端框架要如何學(xué)習(xí)的問(wèn)題。

如果你是一個(gè)前端新手，刷過(guò) Vue 官網(wǎng)但是還沒(méi)做過(guò) SPA 應(yīng)用（甚至沒(méi)聽(tīng)說(shuō)過(guò) SPA 應(yīng)用），那么這三個(gè)框架對(duì)你來(lái)說(shuō)還是蠻有挑戰(zhàn)的，上手并不容易，我也不是特別建議使用這個(gè)來(lái)入門(mén)。

原因很簡(jiǎn)單，這三個(gè)前端框架都算是比較專(zhuān)業(yè)的前端框架，里邊集成了很多東西，如果你是新手的話，很容易就搞懵了。

最好自己先做過(guò)一些 SPA 應(yīng)用，對(duì)前端的整體流程有一個(gè)基本把握，再去學(xué)習(xí)這些框架，相對(duì)而言就會(huì)容易很多。說(shuō)到這里，如果大家感興趣，不妨看看松哥的：微人事項(xiàng)目視頻教程。