搭建一個(gè)后臺(tái)管理，從零開始開發(fā)，其實(shí)并不容易，在眾多開源管理后臺(tái)中，Vue3是一個(gè)備受矚目的選擇。它是一個(gè)現(xiàn)代化的前端框架，具有高效、靈活、易用等特點(diǎn)，今天，要為大家介紹幾款開源免費(fèi)vue3開源管理后臺(tái)，可以幫助我們快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。

1、Vue vben admin：

是一個(gè)基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript的后臺(tái)解決方案，目標(biāo)是為開發(fā)中大型項(xiàng)目提供開箱即用的解決方案。

掌握這個(gè)項(xiàng)目需要一定前端基礎(chǔ)知識(shí)以及掌握 Vue 的基礎(chǔ)知識(shí)，以便能處理一些常見的問題。建議在開發(fā)前先學(xué)一下以下內(nèi)容，提前了解和學(xué)習(xí)這些知識(shí)，會(huì)對(duì)項(xiàng)目理解非常有幫助:

項(xiàng)目功能：

最新技術(shù)棧：基于Vue3、Vite、TypeScript等最新技術(shù)棧開發(fā)。

輕量快速的熱重載：無論應(yīng)用程序大小如何，都始終極快的模塊熱重載（HMR）。

豐富的示例：常見的Web端插件示例實(shí)現(xiàn)。

組件封裝：對(duì)日常使用頻率較高的組件二次封裝,滿足基礎(chǔ)工作需求。

主題配置：豐富的主題配置及黑暗主題適配。

• 關(guān)于黑暗主題：項(xiàng)目已經(jīng)內(nèi)置了黑暗主題切換，只需配置自己需要的顏色變量，即可在項(xiàng)目中使用。
• 原理：通過 vite-plugin-theme 插件，將所有的顏色變量抽取到獨(dú)立的 css 文件，并且全部在 html 上面加上 css 選擇器。通過改變 html 標(biāo)簽的 data-theme 屬性來進(jìn)行黑暗主題切換。

權(quán)限管理：完善的前后端權(quán)限管理方案

注意的是：本地開發(fā)推薦使用Chrome 最新版瀏覽器，不支持Chrome 80以下版本。生產(chǎn)環(huán)境支持現(xiàn)代瀏覽器，不支持IE。

2、Naive Ui Admin

基于 vue3,vite2,TypeScript,搭配使用 [Naive Ui](Naive UI) 組件庫形成一套開箱即用的中后臺(tái)前端解決方案。

Naive Ui Admin 遵守 Naive Ui 組件設(shè)計(jì)和開發(fā)約定,風(fēng)格統(tǒng)一,它使用了最新的前端技術(shù)棧，并提煉了典型的業(yè)務(wù)模型，頁面，包括二次封裝組件、動(dòng)態(tài)菜單、權(quán)限校驗(yàn)、粒子化權(quán)限控制等功能，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)項(xiàng)目。

它的特點(diǎn):

• 開箱即用的中后臺(tái)框架/讓你少寫一些代碼。
• 提供開箱即用的企業(yè)級(jí)前后端產(chǎn)品，可節(jié)約大量時(shí)間直接開發(fā)業(yè)務(wù)。

• 多生態(tài)支持:為企業(yè)產(chǎn)品提供多 UI 生態(tài)支持，新老項(xiàng)目開發(fā)或重構(gòu)，均可以最優(yōu)開發(fā)成本，快速上線。
• 從框架層面，業(yè)務(wù)層面，頁面擴(kuò)展性/組合性，真正開箱即用，小白也能輕松上手。
• 實(shí)用模板:從眾多系統(tǒng)以及業(yè)務(wù)中，摘取實(shí)用性較高且通用的頁面設(shè)計(jì)，輕松構(gòu)建規(guī)范且美觀的系統(tǒng)。

常見問題：

• 如果頁面語法是 script setup 那么需要在上面在寫一個(gè) export default { name: 'pageName' }。
• 如果不是，那就在 defineComponent 中定義 name 就好了。
• 可以借助 vite-plugin-vue-setup-extend 插件。

提示：目前框架只支持到，二級(jí)菜單，無法支持二級(jí)以上的菜單，Plus 版本已支持。

3、SCUI Admin

一款功能強(qiáng)大的 admin 框架，很多復(fù)雜的業(yè)務(wù)組件、頁面模板都有，專業(yè)程度堪比付費(fèi)的產(chǎn)品。

SCUI Admin基于 Vue3、elementPlus 持續(xù)性的提供獨(dú)家組件和豐富的業(yè)務(wù)模板幫助你快速搭建企業(yè)級(jí)中后臺(tái)前端任務(wù)。不僅免費(fèi)開源，還有很多現(xiàn)成的業(yè)務(wù)組件、頁面模板。

項(xiàng)目特點(diǎn)：

• 簡潔至上：憑借VUE組件化開發(fā)，以最小的代碼量和最少的時(shí)間幫助你專注于業(yè)務(wù)。
• 可用性：在超高可用性和視覺信息上做了個(gè)平衡，一切以用戶體驗(yàn)為第一標(biāo)準(zhǔn)。
• 高性能：在提高前端算力、減少帶寬請求和代碼執(zhí)行力上多次優(yōu)化，并且持續(xù)著。

構(gòu)建與部署:

• 當(dāng)項(xiàng)目編寫完成后，只需要一行命令就會(huì)打包你的應(yīng)用。
• 等待打包完成后在根目錄生成dist文件夾。里面就是打包構(gòu)建好的文件。接著可以把這個(gè)文件夾發(fā)給部署人員啦。

框架核心：

4、vue-pure-admin

vue-pure-admin是一個(gè)免費(fèi)開源的中后臺(tái)模版。使用了最新的vue3 vite2 Element-Plus TypeScript等主流技術(shù)開發(fā)，開箱即用的中后臺(tái)前端解決方案，也可用于學(xué)習(xí)參考。

?? 保持穩(wěn)定的同時(shí)采用最新技術(shù)棧。

基于Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss等最新技術(shù)棧開發(fā)。

?? 輕快熱重載完善的打包優(yōu)化方案。

無論應(yīng)用程序大小如何，都始終極快的模塊熱重載（HMR），內(nèi)置完善的打包優(yōu)化方案。

?? 簡易上手內(nèi)置豐富組件工具函數(shù)。

使用單文件組件語法，提供了很多豐富的開箱即用的組件和工具庫。

?? 高度可配置主題和三種菜單布局。

高度可配置的主題以及暗黑主題適配，并且提供左側(cè)、頂部、綜合這三種菜單布局模式。

5、Admin Work Pro

Admin Work X，漂亮、強(qiáng)大、完善。采用 Vue3 Webpack Typescript ElementPlus編寫的中后臺(tái)框架。全面的系統(tǒng)配置，優(yōu)質(zhì)模板，常用組件，真正一站式開箱即用。

項(xiàng)目特性：

• 最新技術(shù)棧：基于Vue3、Vite、TypeScript、NaiveUI、Vuex等最新技術(shù)棧開發(fā)。
• 輕量快速的熱重載：無論應(yīng)用程序大小如何，都始終極快的模塊熱重載（HMR）。
• 豐富的示例：常見的Web端插件示例實(shí)現(xiàn)。
• 組件封裝：對(duì)日常使用頻率較高的組件二次封裝,滿足基礎(chǔ)工作需求。

• 主題配置：豐富的主題配置及黑暗主題適配。
• 權(quán)限管理：完善的前后端權(quán)限管理方案。
• 常用模板：內(nèi)置常用模板，無需考慮交互排版，助你高效開發(fā) 預(yù)設(shè)樣式。
• 樣式美觀大方，無縫對(duì)接 Naive Ui，隨意組合頁面，隨心所欲 布局方案。
• 豐富的布局模式，具有高可配性，滿足您的各類布局需求。

6、Naive UI

Naive UI是一個(gè)完全使用 TypeScript 編寫的 Vue 3 組件庫。

特性:比較完整有超過70個(gè)組件，可以幫助你少寫點(diǎn)代碼。它們?nèi)伎梢?treeshaking。

主題可調(diào) 我們提供了一個(gè)使用 TypeScript 構(gòu)建的先進(jìn)的類型安全主題系統(tǒng)。你只需要提供一個(gè)樣式覆蓋的對(duì)象，剩下的都交給我們。

順便一提，不用 less、sass、css 變量，也不用 webpack 的 loaders。以及你可以試試右下角的主題編輯器。

使用 TypeScript Naive UI 全量使用 TypeScript 編寫，和你的TypeScript項(xiàng)目無縫銜接。你不需要導(dǎo)入任何 CSS 就能讓組件正常工作。

創(chuàng)建適配主題的組件: 你可能覺得只用內(nèi)置的組件不夠，想自己也寫適配主題的組件。Naive UI 提供一些工具幫助開發(fā)者簡單的創(chuàng)建支持主題的組件。

安裝注意:naive-ui 僅支持 Vue3。

7、Soybean Admin ：

Soybean Admin 是一個(gè)基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新優(yōu)雅的中后臺(tái)模版，它使用了最新流行的前端技術(shù)棧，內(nèi)置豐富的主題配置，有著極高的代碼規(guī)范，基于文件的路由系統(tǒng)以及基于 Mock 的動(dòng)態(tài)權(quán)限路由，開箱即用的中后臺(tái)前端解決方案，也可用于學(xué)習(xí)參考。

項(xiàng)目特性：

• 最新流行技術(shù)棧：基于Vue3、Vite3、TS、NaiveUI和UnoCSS等最新技術(shù)棧開發(fā)。
• 極高水準(zhǔn)的代碼規(guī)范：代碼規(guī)范完善，代碼結(jié)構(gòu)清晰。
• 豐富的插件：常見的Web端插件示例實(shí)現(xiàn)。
• 主題配置：豐富的主題配置及暗黑主題適配。
• 基于文件的路由系統(tǒng)：自動(dòng)生成路由聲明、路由導(dǎo)入和路由模塊。
• 權(quán)限管理：完善的前后端權(quán)限管理方案。

8、blur-admin Star

Blur admin 是Angular前端管理儀表板模，旨在引導(dǎo)您的產(chǎn)品開發(fā)，并提供用于構(gòu)建原型甚至生產(chǎn)就緒 應(yīng)用程序的生態(tài)系統(tǒng)。

項(xiàng)目特性：

很棒的結(jié)構(gòu)：基于特征的結(jié)構(gòu)已被證明是大角度應(yīng)用的良好選擇。

簡潔的設(shè)計(jì)：簡介板塊化設(shè)計(jì)，精心挑選了每個(gè)顏色和字符！

易于定制：可以在短短2分鐘內(nèi)創(chuàng)建不同的外觀.

9、iView admin

iView admin是基于 Vue.js，搭配使用 iView UI 組件庫形成的一套后臺(tái)集成解決方案。

• iview. admin其實(shí)就是一款后端框架
• 需要依賴于nodejs
• 啟動(dòng)成功后，可以進(jìn)行二次開發(fā)

10、Vuestic Admin

Vuestic Admin是一個(gè)完全免費(fèi)的開源管理模板，具有 44 個(gè)以上易于配置的 UI 組件。它用戶友好、跨瀏覽器兼容、可定制且響應(yīng)迅速。

免費(fèi)和精美的Vue.js管理模板包括38以上個(gè)定制用戶界面組件 由Epicmax開發(fā)。由Vasili Savitski設(shè)計(jì)。

11、eladmin-jpa

eladmin-jpa 版本：項(xiàng)目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前后端分離的后臺(tái)管理系統(tǒng)。

通用型后臺(tái)管理模板，界面美觀、開箱即用。

擁有豐富的擴(kuò)展組件和模板頁面，適合各類中后臺(tái)應(yīng)用。

產(chǎn)品優(yōu)勢：

源碼可控：代碼無后門，可放心使用 源代碼注釋詳細(xì)，便于閱讀。

功能完善：包含管理系統(tǒng)常用的基礎(chǔ)功能 提供豐富的模板頁面及功能案例。

多端支持：響應(yīng)式設(shè)計(jì) 支持主流的現(xiàn)代瀏覽器。

• 上手容易：完善的產(chǎn)品開發(fā)文檔，大量演示示例，組件式開發(fā) 提供授權(quán)用戶專屬技術(shù)解答服務(wù)群。
• 低成本：界面美觀，免去設(shè)計(jì)工作。
  一次永久授權(quán)，終身免費(fèi)更新。
• 售后保障：5x8小時(shí)在線服務(wù) 始終基于主流技術(shù)棧。
  版本持續(xù)更新，集大眾所需。

12、D2Admin

D2Admin是一個(gè)完全 開源免費(fèi) 的企業(yè)中后臺(tái)產(chǎn)品前端集成方案，使用最新的前端技術(shù)棧，已經(jīng)做好大部分項(xiàng)目前期準(zhǔn)備工作，并且?guī)в写罅渴纠a，助力管理系統(tǒng)敏捷開發(fā)。

13、ladmin-jpa 版本：

項(xiàng)目基于 Spring Boot 2.1.0 、 Jpa、 Spring Security、redis、Vue的前后端分離的后臺(tái)管理系統(tǒng)。

主要特性

使用最新技術(shù)棧，社區(qū)資源豐富。

高效率開發(fā)，代碼生成器可一鍵生成前后端代碼。

支持?jǐn)?shù)據(jù)字典，可方便地對(duì)一些狀態(tài)進(jìn)行管理。

支持接口限流，避免惡意請求導(dǎo)致服務(wù)層壓力過大。

支持接口級(jí)別的功能權(quán)限與數(shù)據(jù)權(quán)限，可自定義操作。

自定義權(quán)限注解與匿名接口注解，可快速對(duì)接口攔截與放行。

對(duì)一些常用地前端組件封裝：表格數(shù)據(jù)請求、數(shù)據(jù)字典等。

前后端統(tǒng)一異常攔截處理，統(tǒng)一輸出異常，避免繁瑣的判斷

支持在線用戶管理與服務(wù)器性能監(jiān)控，支持限制單用戶登錄

支持運(yùn)維管理，可方便地對(duì)遠(yuǎn)程服務(wù)器的應(yīng)用進(jìn)行部署與管理

14、Ant Design Pro

Ant Design Pro 是一款企業(yè)級(jí) UI 設(shè)計(jì)語言和 React 組件庫,由阿里巴巴集團(tuán)的 Ant Design 團(tuán)隊(duì)開發(fā)和維護(hù)。它致力于提供高質(zhì)量的 UI 設(shè)計(jì)和開發(fā)解決方案,幫助企業(yè)快速搭建屬于自己的前端應(yīng)用框架。

遵循響應(yīng)式設(shè)計(jì)原則： Ant Design Pro采用了響應(yīng)式設(shè)計(jì)原則，使得在不同設(shè)備上的展示效果保持一致，同時(shí)支持多種設(shè)備尺寸的適配。

豐富的組件庫：Ant Design Pro 提供了豐富的React 組件庫，涵蓋了表單、數(shù)據(jù)可視化、布局、導(dǎo)航、菜單等多個(gè)方面，滿足開發(fā)者各種需求。

易用的樣式定制：AntDesignPro提供了簡單易用的樣式定制功能，開發(fā)者可以通過自定義樣式輕松實(shí)現(xiàn)個(gè)性化定制。|

完善的文檔和社區(qū)支持：Ant Design Pro擁有詳細(xì)的中文文檔和豐富的社區(qū)資源，幫助開發(fā)者快速上手和解決問題。

15、vue-admin-beautifu

Vue Admin Beautiful是一款基于Vue.js技術(shù)棧開發(fā)的管理后臺(tái)模板，它具有豐富的功能和靈活的布局，能夠幫助開發(fā)者快速構(gòu)建一流的后臺(tái)管理系統(tǒng)。

Vue Admin Beautiful的主要優(yōu)勢在于它多樣化的組件，可以滿足各種需求。它提供了近百個(gè)組件，包括按鈕、表單、面包屑、對(duì)話框、表格等，使得開發(fā)者可以在不同的場景中選擇最合適的組件進(jìn)行使用。

同時(shí)，Vue Admin Beautiful還提供了一個(gè)高度可定制的主題系統(tǒng)，允許用戶快速創(chuàng)建自己的UI風(fēng)格，以滿足不同品牌和設(shè)計(jì)需求。

16、AdminLTE Star

AdminLTE Bootstrap 管理儀表板模板。

最佳開源管理儀表板和控制面板主題。AdminLTE 構(gòu)建于 Bootstrap 之上，提供了一系列響應(yīng)式、可重用且常用的組件。

項(xiàng)目特性：

HTML5 和 CSS3:由 W3C 服務(wù)驗(yàn)證 HTML5 和 CSS3 語法。

響應(yīng)式設(shè)計(jì)：移動(dòng)優(yōu)先設(shè)計(jì)。適合多種分辨率，從大型臺(tái)式機(jī)到小型移動(dòng)設(shè)備。

1000+ 圖標(biāo)：具有 Font Awesome、Ion Icon 和 Glyphicons 功能。

瀏覽器兼容性：支持大多數(shù)主流瀏覽器，包括 Safari、IE9+、Chrome、FF 和 Opera。

6款皮膚：選擇與您的品牌相匹配的皮膚或編輯 LESS 變量來創(chuàng)建您自己的皮膚。

增強(qiáng)打印功能：支持打印任意頁面。發(fā)票頁面就是一個(gè)完美的例子。