2022年值得收藏的17個Vue 後台管理模板

本篇文章給分享17個值得收藏的vue後台管理範本。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《vue.js教學》

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

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

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

1. Vue Black Dashboard Pro

##線上網址：https ://demos.creative-tim.com/vue-black-dashboard-pro/?ref=learnvue.co#/dashboard

更多：https://www.creative-tim.com/product/vue- black-dashboard-pro?ref=learnvue.co

#Vue Black Dashboard Pro是一個Bootstrap 4 Admin Dashboard，其中包含數十個元件，自訂元素，插件和範例程式碼，它們可以完美地滿足我們的設計需求。

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

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

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

Vue Black Dashboard Pro 主要特點：

• 基於Bootstrap 4

• 有大量範例的詳細文件

• #200多個自訂元素

• Sketch，Vue，SASS 和HTML 原始檔

• 響應式設計

• 暗模式與亮模式

#2. Vue Paper Dashboard

線上事例：https://demos.creative-tim.com/vue-paper-dashboard-pro/?_ga=2.230603804.163601398.1609605836-1654756133.16085826912691 www.creative-tim.com/product/vue-paper-dashboard-2-pro?ref=learnvue.co

只需查看Vue Paper Dashboard 2 Pro 的範例頁面，就可以看到從插件一直到不同組件和元素的細節注意。

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

主要特點：

良好的文件

• #基於Bootstrap 4

• 響應式設計

• 160 多個自訂元素

• #為設計師準備的Photoshop檔案
3. Vue Light Bootstrap Dashboard Pro

#事例位址：https://demos.creative-tim.com/vue-light- bootstrap-dashboard-pro/?&_ga=2.208068498.163601398.1609605836-1654756133.1608582691#/admin/overview

cc-cc-#片#creue-cw-#c-c-c-c-片#-c4-#-#4-c-c-#-片#-c-c-#-c-c-c-c-c-c-c-c-cr-c-c-Mr8-pro-片# pro?ref=learnvue.co

顧名思義，

Vue Light Bootstrap Dashboard Pro

是使用Bootstrap 4和VueJS建構的。

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

此功能可讓開發人員根據自己的特定專案需求來客製化。無需數小時的額外編程即可提供自訂的感覺。

主要特點：

基於Bootstrap 4

• 160 多個自訂元素

• 響應式設計

• 高度可自訂的側邊欄選單
4. Sing App Vue

線上網址：https://flatlogic.com/templates/sing-app-vue/demo##文件網址：https://flatlogic .com/templates/sing-app-vue

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

主要特點：

響應式設計

• 8 個圖表庫和2個Dashboard

• E-Commerce Section

• Fully Documented Codebase

5. Vue Paper Dashboard

#範例網址：https://demos.creative-tim.com/ vue-paper-dashboard/?_ga=2.133615758.163601398.1609605836-1654756133.1608582691#/dashboard

文件位址：https://www.d-t. co

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

主要特點：

• 免費下載

• #16個以上的自訂元素

• Bootstrap3 管理範本

• #響應式設計

6. CoPilot

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

CoPilot 是另一個免費的基於Bootstrap 的響應式管理範本。作為一個開源項目，CoPilot 入門就像克隆 Github 儲存庫一樣容易！

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

主要特點：

• 開源

• #響應式設計

• 乾淨直覺的使用者介面

• 快速安裝

#7. Vuetify Material Dashboard

#線上網址：https://demos.creative-tim.com/vuetify-material-dashboard-pro/?_ga=2.4509107.163601398.1609605836-1654756133.16085826911：https# //www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=learnvue.co

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

模板不僅看起來很棒，而且還利用了 Material Design 規格創建了一個乾淨，可存取的使用者介面。顏色很棒，模板易於定制，總體而言，一切都做得很好。

這個範本比較上面的，它附帶了 Vuex 來處理狀態管理，這個內建的範本有一定的優點。

主要特點：

內建Vuetify

• 內建了對Vuex 的支援
• 高度可自訂的範本
• 200多個自訂元素
• 響應式設計

8. Vue White Dashboard

範例網址：https://demos.creative-tim.com/vue-white-dashboard/

文件：https://www.creative-tim.com/product/vue-white-dashboard?ref=learnvue.co

Vue White Dashboard

是一個免費的Bootstrap 4 管理範本。有16個免費元素，3個自訂插件和7個範例頁面，對於那些只想尋找一種免費方法來測試其儀表板的人來說，這是一個很好的起點。 主要特點：

免費

• Bootstrap4 管理範本
• 響應式設計
• 16個自訂元素

9. Vue Chuck Admin

#範例網址：https://alpixel.github.io/vue-chuckadmin/ #/

文件位址：https://github.com/alpixel/vue-chuckadmin

此開源Vue 管理範本是基於ChuckCSS 框架建置。程式碼中已經新增了許多Vue函式庫，例如

vue-router

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

主要特點：

開源

• 高度可自訂
• 內建Vue函式庫
• ##10 . CoreUI Vue

線上網址：https://coreui.io/vue/demo/free/3.1.1/#/dashboard 文檔網址：https://coreui.io/vue/

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

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

主要特點：

免費的Vue 範本

良好的文件
• 行動裝置友好，跨瀏覽器相容性
• 100多個可重複使用且可自訂的小部件
• 11. Vue Element Admin

線上網址：https://panjiachen.github.io/vue-element-admin/#/login?redirect=/dashboard

文件網址：https://github.com/PanJiaChen/ vue-element-admin

Vue Element Admin是另一個開源Vue 背景範本。它建立在Element UI庫的基礎之上，Github上的有63K顆星，非常受歡迎。

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

借助已內建的登入權限，文字編輯器，資料匯出等功能，這對於想要功能強大的後台範本這是一個不錯的選擇。

主要特點：

• 開源
• 響應式元素
• 眾多功能
• 高度可自訂

#12. Vuestic

#線上網址：https://vuestic.epicmax.co/admin/dashboard
文件位址：https://github.com/epicmaxco/vuestic-admin

Vuestic Admin 是一個免費的Vue.js管理模板，包含44 自訂UI元件。

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

主要特點：

• 免費管理範本
• 高度可自訂的44 元素
• 多主題
• 回應式設計

13. Bootstrap Vue Argon Dashboard Pro

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

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

主要特點：

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

14. Vue Material Template

線上網址：https://flatlogic.com/templates /vue-material-template-full/demo
文件位址：https://flatlogic.com/templates/vue-material-template-full

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

主要特點：

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

15. Light Blue Vue Lite

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

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

16. Vue Material Dashboard

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

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

主要特點：

免費範本
• 使用Vue Material
• 良好的文件記錄

線上網址：https://demos.creative-tim.com/vue-material-dashboard/

#文件位址：https://www.creative-tim.com/product/vue-material-dashboard?ref =learnvue.co

17. Vue Now UI Dashboard Pro

#線上位址：https://demos.creative- tim.com/vue-now-ui-dashboard-pro/?_ga=2.201309230.163601398.1609605836-1654756133.1608582691#/dashboard##procative-#-www. -ui-dashboard-pro?ref=learnvue.co

翻譯網址：https://segmentfault.com/a/1190000039833325

#更多程式相關知識，請造訪：

程式設計影片

！ ！

以上是2022年值得收藏的17個Vue 後台管理模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！