九個(gè)新穎的開源 Vue 控制面板

作者：zone7 2024-09-18 07:00:00

本文介紹的是2024年精選的一些比較新穎的Vue控制面板項(xiàng)目，以供各種類型的項(xiàng)目前端框架技術(shù)選型。

Vue是目前最流行的前端開發(fā)框架之一，它基于響應(yīng)式和組件結(jié)構(gòu)化的設(shè)計(jì)模式為Web開發(fā)提供了靈活、輕量級的解決方案。

回顧過去，Vue2于2014年推出，對于具有HTML和JavaScript背景的開發(fā)人員這個(gè)框架的簡單易學(xué)，有賴于其較好的健壯性、可擴(kuò)展性，并且簡單易學(xué)，一發(fā)布便迅速在前端開發(fā)界流行起來。

如今，許多項(xiàng)目已經(jīng)在使用Vue3，其實(shí)Vue3早在2020年便發(fā)布了，與Vue2相比，Vue3有了許多重大改進(jìn)，例如：Composition API、更好的TypeScript支持和增強(qiáng)，較高的加載性能，使得Vue3更適合大型項(xiàng)目中應(yīng)用。

Vue的生態(tài)系統(tǒng)擁有著強(qiáng)大的社區(qū)支持，有許多組件庫、工具和儀表盤等可用于各種類型的項(xiàng)目。

控制面板、儀表盤，其實(shí)是一個(gè)Web應(yīng)用的最基本門面。在開源社區(qū)中，存在著許多基于Vue的組件以及布局，為開發(fā)人員構(gòu)建控制面板、儀表盤等界面節(jié)省了大量時(shí)間。

下面是2024年精選的一些比較新穎的Vue控制面板項(xiàng)目，以供各種類型的項(xiàng)目前端框架技術(shù)選型。

1.Vuestic

https://github.com/epicmaxco/vuestic-admin

Star：10.5K

Vuestic-Admin是一個(gè)美麗的管理界面模板，基于Vue 3、Vite、Pinia和Tailwind CSS框架搭建。專為構(gòu)建高效、響應(yīng)迅速和快速加載的管理界面而設(shè)計(jì)。

主要特征包括：

快速高效、開發(fā)：基于Vue 3、Vite、Pinia和Tailwind CSS。
現(xiàn)代、醒目：支持黑暗主題。
輕松定制：支持全局配置。
包容性和用戶友好。
集成i18n：輕松本地化，覆蓋全球。
豐富的學(xué)習(xí)資源，學(xué)習(xí)和提高技能的理想選擇。
支持響應(yīng)式設(shè)計(jì)，無縫適應(yīng)所有設(shè)備。
專家團(tuán)隊(duì)支持，來自專家的可靠幫助。
高度可定制，根據(jù)您的項(xiàng)目風(fēng)格定制。

Demo：https://admin-demo.vuestic.dev/dashboard

2.V3 Admin

https://github.com/un-pany/v3-admin-vite

Star：4.9K

V3 Admin Vite是一款免費(fèi)開源的中后臺管理系統(tǒng)基礎(chǔ)解決方案，基于Vue3、TypeScript、Element Plus、Pinia、Vite等主流框架搭建。

功能特性包括：

用戶管理：登錄和退出演示
權(quán)限管理：頁面級權(quán)限（動態(tài)路由）、按鈕級權(quán)限（指令權(quán)限、權(quán)限函數(shù)）和路由導(dǎo)航守衛(wèi)
多種環(huán)境：開發(fā)、試運(yùn)行、生產(chǎn)
多個(gè)主題：普通、深色、深藍(lán)色、三種主題模式
多種布局：左，上，左上，三種布局模式
錯(cuò)誤頁面：404錯(cuò)誤頁面
儀表板：根據(jù)不同的用戶顯示不同的儀表板頁面
其他功能：SVG，動態(tài)邊欄，動態(tài)面包屑導(dǎo)航，選項(xiàng)卡式導(dǎo)航，全屏，自適應(yīng)收縮邊欄，鉤子（可組合）

技術(shù)堆棧：

Vue3：使用Vue3 +腳本設(shè)置的最新Vue3組合API
Element Plus：Vue3版本的Element UI
Pinia：Vue3中Vuex的替代方案
Vite：Really fast
Vue Router：router
TypeScript：JavaScript與類型匹配
PNPM：更快，節(jié)省磁盤空間的軟件包管理工具
Scss：與Element Plus一致
CSS變量：主要控制項(xiàng)目的布局和顏色
ESlint：代碼驗(yàn)證
Prettier：代碼格式化
Axios：基于Promise的HTTP客戶端（封裝）
UnoCSS：高性能和靈活性的實(shí)時(shí)原子化CSS引擎
移動的兼容：布局與移動的頁面分辨率兼容

3.Vue Element-plus Admin

https://github.com/kailong321200875/vue-element-plus-admin

Star:2.7K

vue-element-plus-admin 是一個(gè)基于 element-plus 免費(fèi)開源的中后臺模版。使用了最新的vue3，vite，TypeScript等主流技術(shù)開發(fā)，開箱即用的中后臺前端解決方案，可以用來作為項(xiàng)目的啟動模版，也可用于學(xué)習(xí)參考。

vue-element-plus-admin 的定位是后臺集成方案，不太適合當(dāng)基礎(chǔ)模板來進(jìn)行二次開發(fā)。因?yàn)榧闪撕芏嗄憧赡苡貌坏降墓δ埽瑫斐刹簧俚拇a冗余。如果你的項(xiàng)目不關(guān)注這方面的問題，也可以直接基于它進(jìn)行二次開發(fā)。

特性包括：

最新技術(shù)棧：使用 Vue3/vite4 等前端前沿技術(shù)開發(fā)
TypeScript: 應(yīng)用程序級 JavaScript 的語言
主題: 可配置的主題
國際化：內(nèi)置完善的國際化方案
自定義數(shù)據(jù) 內(nèi)置 Mock 數(shù)據(jù)方案
權(quán)限內(nèi)置完善的動態(tài)路由權(quán)限生成方案
組件二次封裝了多個(gè)常用的組件
示例內(nèi)置豐富的示例

4.Sing App Vue Dashboard

https://github.com/flatlogic/sing-app-vue-dashboard

Star：695

Sing App Vue是一個(gè)免費(fèi)的開源管理界面模板，這個(gè)管理界面可以與會計(jì)軟件、客戶關(guān)系管理系統(tǒng)（CRM）、電子郵件管理、營銷自動化、網(wǎng)站分析程序等系統(tǒng)集成。基于這個(gè)模板，開發(fā)人員可以專注于創(chuàng)建獨(dú)特的功能，而不是從頭開始構(gòu)建所有內(nèi)容。另外，它還提供了演示查看、下載、版本檢查和支持選項(xiàng)等。具有以下主要功能特性：

使用Bootstrap 4.5構(gòu)建的響應(yīng)式布局
提供多個(gè)框架版本（Bootstrap 4，React，Vue.js，Angular，AngularJS）
包含用于高效開發(fā)的內(nèi)置組件
提供具有特定功能的精簡版
排版功能
提供表設(shè)計(jì)
通知
基礎(chǔ)的圖表
各種圖標(biāo)
地圖支持
邊緣欄適應(yīng)

5.Mosaic Lite Vue

https://github.com/cruip/vuejs-admin-dashboard-template

Star：246

Mosaic Lite Vue是一個(gè)基于Tailwind CSS的響應(yīng)式儀表板模板，完全使用Vue.js開發(fā)。對于想要為SaaS產(chǎn)品、管理員儀表板、現(xiàn)代Web應(yīng)用程序等開發(fā)用戶界面的人來說，這個(gè)模板是一個(gè)很好的基礎(chǔ)。

6.Vue TSX Admin

https://github.com/manyuemeiquqi/vue-tsx-admin

Star：237

Vue TSX Admin是一個(gè)用于中臺和后臺管理系統(tǒng)的免費(fèi)開源前端模板。使用Vue3 + TSX模式進(jìn)行開發(fā)。它提供開箱即用的中端和后端解決方案。內(nèi)置i18n國際化解決方案、可配置布局、主題顏色修改、權(quán)限驗(yàn)證、精細(xì)化典型業(yè)務(wù)模型，可幫助您快速搭建中后臺項(xiàng)目。

主要特性如下：

CSS解決方案：模塊css +順風(fēng)
網(wǎng)絡(luò)請求：axios
認(rèn)證方案：token + jwt
模擬后臺數(shù)據(jù)：mockjs
存儲管理：pinia
UI組件庫: arco desigin vue
工具庫：lodash + vue-use
國際化切換解決方案：vue-i18 n
打包解決方案和區(qū)域設(shè)置靜態(tài)服務(wù)器：vite

7.Admin One

https://github.com/justboil/admin-one-vue-tailwind

Star：2.1K

Admin One是一個(gè)簡單、漂亮的Vue.js 3.x、Tailwind CSS 3.x管理儀表盤。可以與Nuxt 3.x或Laravel 9.x集成。

主要功能特性如下：

使用Vue.js 3構(gòu)建Tailwind CSS 3框架Composition API
引擎蓋下的Vite
Nuxt 3集成可用
Laravel Breeze Inertia Vue集成可用
SFC
Pinia州立圖書館（官方Vuex 5）
支持黑暗模式
帶自定義樣式的滾動條
帶路由器的SPA
生產(chǎn)CSS僅為38kb
可重用組件
在MIT許可下免費(fèi)
提供高級版支持

8.Django Vue3 Admin

https://github.com/huge-dream/django-vue3-admin

Star：316

Django-Vue 3-Admin是一個(gè)基于角色訪問控制（Role-Based Access Control，簡稱RAC）模型進(jìn)行權(quán)限控制的綜合基礎(chǔ)開發(fā)平臺，具有列級權(quán)限控制粒度。它遵循前端-后端分離架構(gòu)，后端使用Django和Django Rest Framework，前端使用Vue3、Composition API、TypeScript、Vite和Element Plus。

主要特征包括：