手機版 網站建設 網站設計 網站開發 網站制作 16年專業品質
  • 微信
    微信二維碼
  • 微博
  • 商城

推薦三個 Vue 后臺管理模版,配合 Spring Boot 使用真香!

作者:admin  發布時間:2020-05-12 13:51:58

最近因為因為項目的原因,一直在尋找一款合適的前端模版,之前的 Vue 前端頁面都是自己寫的,寫多了就煩了,因為功能都差不多,寫來寫去就沒意思了。

所以在新項目中想看看市面上的 Vue 后臺管理模版,找個現成的,改一改基本就 OK 了,團隊也省事一些。

老實說,Vue 的生態還是相當豐富的,經典的、新生的后臺管理框架都有,我這里和大家分享我們這次重點比較的三個。

vue-element-admin

這個項目名氣還是挺大的,在我剛開始做 vhr 的時候,就有了解過這個項目,那個時候這個項目才剛剛開發沒多久,star 都沒幾個,現在已然混成一方霸主了。

vue-element-admin 是一個后臺前端解決方案,它基于 vue 和 element-ui 實現。它使用了最新的前端技術棧,內置了 i18n 國際化解決方案,動態路由,權限驗證,提煉了典型的業務模型,提供了豐富的功能組件,它可以幫助你快速搭建企業級中后臺產品原型。

可以說,這個項目的功能還是比較全的,它里邊將一些常見的功能模塊如權限管理等都做好了,有的時候,你甚至會覺得這個項目有些臃腫。

我們來看一張效果圖:

這個開源項目也是我們這里最終選定的方案,選定它有幾方面的原因:

  1. 這個項目的開發時間較早,目前相對來說可能 BUG 較少,比較穩定。
  2. 該項目目前依然非?;钴S,作者還在不斷的完善。
  3. 功能齊全,和其他項目相比,功能上基本沒有劣勢。
  4. 相對于其他 UI 框架,ElementUI 使用更多一些,這對于一個商用項目還是非常重要的。

當然,使用開源項目肯定不可能完全契合自己的需求的,這種就要在開發中,再去慢慢克服了。

ant-design-vue-pro

這個也是我們當時重點比較的項目之一。

Ant Design Pro 是一個企業級中后臺前端/設計解決方案,秉承 Ant Design 的設計價值觀,致力于在設計規范和基礎組件的基礎上,繼續向上構建,提煉出典型模板/業務組件/配套設計資源,進一步提升企業級中后臺產品設計研發過程中的『用戶』和『設計者』的體驗。隨著『設計者』的不斷反饋,持續迭代,逐步沉淀和總結出更多設計模式和相應的代碼實現。

我們來看個效果圖:

這個項目也很優秀,但是最終卻“落榜”了,主要是考慮到以下幾個原因:

  1. 這個項目看起來沒有 vue-element-admin 那么“臃腫”,當然也意味著它的功能比較少。
  2. ant design 本身發展時間挺久了,但是一直都是跟 React 玩,去年才開始支持 Vue,這也是這個 Ant Design Pro 看起來比較簡單的原因。
  3. 這個項目權限部分的代碼,和 vue-element-admin 具有高度相似性,如出一轍,所以還不如直接上 vue-element-admin。
?

話說回來,無論用哪個開源項目,想讓項目契合自己的實際應用場景,都是需要大刀闊斧的修改的,開源項目拿來直接就能用的很少,從這個角度講,其實用哪個都無所謂,反正自己都還要改不少東西。但是由于只能選擇一個,我們還是選擇了更懂 Vue 的 vue-element-admin。

?

iview-admin

iView-admin 是 iView 生態中的成員之一,是一套采用前后端分離開發模式,基于 Vue 的后臺管理系統前端解決方案。iView-admin2.0 脫離 1.x 版本進行重構,換用 Webpack4.0 + Vue-cli3.0 作為基本開發環境。內置了開發后臺管理系統常用的邏輯功能,和開箱即用的業務組件,旨在讓開發者能夠以最小的成本開發后臺管理系統,降低開發量。

看慣了 ElementUI ,偶爾看一看 iview 或者 ant design,感覺還蠻清新的。

來看一看它的效果圖:

?

老實說,這些框架同質化太嚴重了,除了 UI 不一樣,其他的基本上沒啥區別,所以我們最終還是選擇了更加經典的 vue-element-admin。

?

我們主要是在這三款中進行比較的,所以這里主要和大家介紹這三個,小伙伴們要是用過其他好用的,歡迎留言區提出來哦~

如何學習

最后我再啰嗦一句,這種前端框架要如何學習的問題。

如果你是一個前端新手,刷過 Vue 官網但是還沒做過 SPA 應用(甚至沒聽說過 SPA 應用),那么這三個框架對你來說還是蠻有挑戰的,上手并不容易,我也不是特別建議使用這個來入門。

原因很簡單,這三個前端框架都算是比較專業的前端框架,里邊集成了很多東西,如果你是新手的話,很容易就搞懵了。

最好自己先做過一些 SPA 應用,對前端的整體流程有一個基本把握,再去學習這些框架,相對而言就會容易很多。


上一篇: 如何做網站定位才能使網站更好的運營 下一篇: 碼農撕運維篇:狀態碼大全
返回列表
16年專業品質
互聯網品牌推廣專家
專業的建站、人機交互策劃、高端UI設計、移動應用開發公司
業務電話:020/22373839    15915747484
業務QQ:641589319
業務QQ:1375530069
廣州總部地址:廣東省廣州市越秀區八旗二馬路48號廣東航運大廈1009室 郵編:510111
海極網絡微信二維碼
秒速时时彩注册