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

1、Vue vben admin：

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

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

項目功能：

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

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

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

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

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

• 關(guān)于黑暗主題：項目已經(jīng)內(nèi)置了黑暗主題切換，只需配置自己需要的顏色變量，即可在項目中使用。
• 原理：通過 vite-plugin-theme 插件，將所有的顏色變量抽取到獨立的 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) 組件庫形成一套開箱即用的中后臺前端解決方案。

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

它的特點:

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

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

常見問題：

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

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

3、SCUI Admin

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

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

項目特點：

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

構(gòu)建與部署:

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

框架核心：

4、vue-pure-admin

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

?? 保持穩(wěn)定的同時采用最新技術(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，漂亮、強大、完善。采用 Vue3 Webpack Typescript ElementPlus編寫的中后臺框架。全面的系統(tǒng)配置，優(yōu)質(zhì)模板，常用組件，真正一站式開箱即用。

項目特性：

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

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

6、Naive UI

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

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

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

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

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

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

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

7、Soybean Admin ：

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

項目特性：

• 最新流行技術(shù)棧：基于Vue3、Vite3、TS、NaiveUI和UnoCSS等最新技術(shù)棧開發(fā)。
• 極高水準(zhǔn)的代碼規(guī)范：代碼規(guī)范完善，代碼結(jié)構(gòu)清晰。
• 豐富的插件：常見的Web端插件示例實現(xiàn)。
• 主題配置：豐富的主題配置及暗黑主題適配。
• 基于文件的路由系統(tǒ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)。

項目特性：

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

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

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

9、iView admin

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

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

10、Vuestic Admin

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

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

11、eladmin-jpa

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

通用型后臺管理模板，界面美觀、開箱即用。

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

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

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

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

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

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

12、D2Admin

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

13、ladmin-jpa 版本：

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

主要特性

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

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

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

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

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

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

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

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

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

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

14、Ant Design Pro

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

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

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

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

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

15、vue-admin-beautifu

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

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

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

16、AdminLTE Star

AdminLTE Bootstrap 管理儀表板模板。

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

項目特性：

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

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

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

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

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

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