國外排名前 15 的 Vue 後臺管理模板

前端小智發表於2022-03-07
作者:Matt Maribojoc
譯者:前端小智
來源:stackabuse

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

後面的模板是我們做後臺管理系統經常所需要的東西。 雖然,我們總可以花很多時間從頭開始設計自己的模板,但有現在的模板讓我們套,節省我們更多時間用來摸魚,何樂而不為呢。

這些現有出色模板,除了節省時間外,還附帶這些好處:

  • 內建常用案例的元件
  • 跨不同檢視的一致樣式
  • 內建響應式設計
  • 技術支援和文件

1. Vue Black Dashboard Pro

線上地址:https://demos.creative-tim.co...
更多:https://www.creative-tim.com/...

image.png

Vue Black Dashboard Pro是一個Bootstrap 4 Admin Dashboard,其中包含數十個元件,自定義元素,外掛和示例程式碼,它們可以完美地滿足我們的設計需求。

我覺得,該預設的配色方案確實具有美感,可為我們的應用程式提供一定程度的專業水準和修飾感。

同時它也有暗模式和亮模式。 此可切換功能確實增加了額外的自定義層,可以使應用程式脫穎而出。

image.png

Vue Black Dashboard Pro建立在vue-clivue-router之上,且文件也寫的很詳細。

Vue Black Dashboard Pro 主要特點:

  • 基於Bootstrap 4
  • 有大量示例的詳細文件
  • 200多個自定義元素
  • Sketch,Vue,SASS 和 HTML 原始檔
  • 響應式設計
  • 暗模式和亮模式

2. Vue Paper Dashboard

線上事例:https://demos.creative-tim.co...

文件地址:https://www.creative-tim.com/...

只需檢視 Vue Paper Dashboard 2 Pro 的示例頁面,你就可以看到從外掛一直到不同元件和元素的細節注意。

我對這個模板比較感興趣的事是程式碼庫的組織方式,這種組織方式讓安裝和執行變得非常直觀。

主要特點:

  1. 良好的文件
  2. 基於Bootstrap 4
  3. 響應式設計
  4. 160 多個自定義元素
  5. 為設計師準備的Photoshop檔案

3. Vue Light Bootstrap Dashboard Pro

事例地址:https://demos.creative-tim.co...

文件地址:https://www.creative-tim.com/...

顧名思義,Vue Light Bootstrap Dashboard Pro是使用 Bootstrap 4和 VueJS構建的。

我真正喜歡的 Vue Light Bootstrap 的 一個原因是,我們可以在各種顏色,背景影像和其他樣式之間自定義邊欄。

此功能允許開發人員根據自己的特定專案需求來定製。 無需數小時的額外程式設計即可提供自定義的感覺。

主要特點:

  1. 基於Bootstrap 4
  2. 160 多個自定義元素
  3. 響應式設計
  4. 高度可定製的側邊欄選單

4. Sing App Vue

image.png

線上地址:https://flatlogic.com/templat...

文件地址:https://flatlogic.com/templat...

Sing App Vue 是使用 Vue2和Bootstrap 4 構建的出色管理模板。我個人非常喜歡此模板的樣式,並喜歡其遵循的現代設計原則。

主要特點:

  1. 響應式設計
  2. 8 個圖表庫和 2個 Dashboard
  3. E-Commerce Section
  4. Fully Documented Codebase

5. Vue Paper Dashboard

示例地址:https://demos.creative-tim.co...

文件地址:https://www.creative-tim.com/...

這個模板是用 Vue2 和 Bootstrap 3 構建的,非常適合用於原型和證明概念。Vue Paper 僅有16種元素,其它 150種以上的元素則來自付費的Creative Tim,不用免費的 16 種元素,也有很多值得我們學習的地方。

主要特點:

  1. 免費下載
  2. 16個以上的自定義元素
  3. Bootstrap3 管理模板
  4. 響應式設計

6. CoPilot

image.png

線上地址:https://copilot.mistergf.io/
文件地址:https://github.com/misterGF/C...

CoPilot 是另一個免費的基於 Bootstrap 的響應式管理模板。 作為一個開源專案,CoPilot 入門就像克隆 Github 儲存庫一樣容易!

我喜歡 CoPilot 頁面頂部的漂亮的載入器動畫。 載入不同元件時的進度條確實使該應用程式具有現代感和優美感。

主要特點:

  1. 開源
  2. 響應式設計
  3. 乾淨直觀的使用者介面
  4. 快速安裝

7. Vuetify Material Dashboard

image.png

線上地址:https://demos.creative-tim.co...

文件:https://www.creative-tim.com/...

對於具有 Vuetify 框架經驗的 Vue開發人員來說,Vuetify Material Dashboard 是一個絕佳的選擇。

模板不僅看起來很棒,而且還利用了 Material Design 規範建立了一個乾淨,可訪問的使用者介面。 顏色很棒,模板易於定製,總體而言,一切都做得很好。

這個模板相比上面的,它附帶了 Vuex 來處理狀態管理,這個內建的模板有一定的優點。

主要特點:

  • 內建 Vuetify
  • 內建了對 Vuex 的支援
  • 高度可定製的模板
  • 200多個自定義元素
  • 響應式設計

8. Vue White Dashboard

示例地址:https://demos.creative-tim.co...
文件:https://www.creative-tim.com/...

Vue White Dashboard 是一個免費的 Bootstrap 4 管理模板。 有16個免費元素,3個自定義外掛和7個示例頁面,對於那些只想尋找一種免費方法來測試其儀表板的人來說,這是一個很好的起點。

主要特點:

  • 免費
  • Bootstrap4 管理模板
  • 響應式設計
  • 16個自定義元素

9. Vue Chuck Admin

示例地址:https://alpixel.github.io/vue...

文件地址:https://github.com/alpixel/vu...

此開源 Vue 管理模板基於 ChuckCSS 框架構建。程式碼中已經新增了許多Vue庫,例如vue-routerVuex

儘管它可能不是“現成的”,但它確實為開發人員在儀表板的佈局,設計和結構上提供了額外的靈活性。

主要特點:

  • 開源
  • 高度可定製
  • 內建Vue庫

10. CoreUI Vue

image.png

線上地址:https://coreui.io/vue/demo/fr...
文件地址:https://coreui.io/vue/

CoreUI Vue 是 CoreUI 的免費 Vue 模板。 它建立在Bootstrap之上,提供了100多種自定義元素,例如按鈕,卡片,影像輪播等等,從而使開發過程變得輕鬆自如。

我真的很喜歡CoreUI的風格和文件的清晰程度。

主要特點:

  • 免費的Vue 模板
  • 良好的文件
  • 移動端友好,跨瀏覽器相容性
  • 100多個可重用和可定製的小部件

11. Vue Element Admin

image.png

線上地址:https://panjiachen.github.io/...

文件地址:https://github.com/PanJiaChen...

Vue Element Admin是另一個開源 Vue 後臺模板。 它建立在Element UI庫的基礎之上,Github上的有63K顆星,非常受歡迎。

對於免費工具,Vue Element Admin中包含大量的元件,頁面和功能。

藉助已內建的登入許可權,文字編輯器,資料匯出等功能,這對於想要功能強大的後臺模板這是一個不錯的選擇。

主要特點:

  • 開源
  • 響應式元素
  • 眾多功能
  • 高度可定製

12. Vuestic

image.png

線上地址:https://vuestic.epicmax.co/ad...
文件地址:https://github.com/epicmaxco/...

Vuestic Admin 是一個免費的Vue.js管理模板,包含44+自定義UI元件。

Vuestic Adminn 具有高度可定製性,可以滿足我們的任何儀表板需求,並且設計是一種時尚,專業的方式來顯示資料。

主要特點:

  • 免費管理模板
  • 高度可定製的44+元素
  • 多個主題
  • 響應式設計

13. Bootstrap Vue Argon Dashboard Pro

image.png

從視覺上來說,Creative Tim 的這個儀表板是我最喜歡的儀表板之一。 所有元素看起來都非常乾淨,可以高效地顯示資料,並且所有內容都非常易於定製。

擁有200多個可以使用SASS樣式進行修改的元件,使用此模板可以輕鬆進行開發。

主要特點:

  • 200 +的元素
  • 響應式 Bootstrap 儀表板
  • 17個自定義外掛
  • 優秀的文件

14. Vue Material Template

image.png

線上地址:https://flatlogic.com/templat...
文件地址:https://flatlogic.com/templat...

Vue Material Admin Template是一個基於Vue的Material Design後臺管理模板,使用Vuetifyjs作為基礎的框架。

主要特點:

  • 流暢的響應式設計
  • 基於Vuetify和 Material Design
  • 三種顏色主題和深色模式
  • Vuex和Vue-Router支援

15. Light Blue Vue Lite

image.png

淺藍主題Vue管理模板(Light Blue Vue Admin)是一個免費的Vue.js和Bootstrap 4儀表板模板,設計獨特、具有稍微透明的小部件和漸變背景。

淺藍主題Vue管理模板(Light Blue Vue Admin)可以輕鬆為IoT儀表板、SAAS啟動、預訂管理系統或任何其他Web應用程式構建管理介面。

image.png

16. Vue Material Dashboard

image.png

Vue Material Dashboard是使用Vue Material的另一個免費資源。 這是構建快速應用程式的絕佳模板,它甚至可以用於大型應用程式。

程式碼本身有很好的文件說明,易於定製,甚至Vue Router已經為您設定好了。

主要特點:

  • 免費模板
  • 使用 Vue Material
  • 良好的文件記錄

線上地址:https://demos.creative-tim.co...

文件地址:https://www.creative-tim.com/...

17. Vue Now UI Dashboard Pro

image.png

線上地址:https://demos.creative-tim.co...

文件:https://www.creative-tim.com/...

~完,我是刷碗智,我要去刷碗了,骨的白!


程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文:https://learue.co/2021/01/top...

交流

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章