搭建一個后臺管理,從零開始開發,其實并不容易,在眾多開源管理后臺中,Vue3是一個備受矚目的選擇。它是一個現代化的前端框架,具有高效、靈活、易用等特點,今天,要為大家介紹幾款開源免費vue3開源管理后臺,可以幫助我們快速搭建企業級中后臺產品原型。
1、Vue vben admin:
是一個基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript的后臺解決方案,目標是為開發中大型項目提供開箱即用的解決方案。
掌握這個項目需要一定前端基礎知識以及掌握 Vue 的基礎知識,以便能處理一些常見的問題。建議在開發前先學一下以下內容,提前了解和學習這些知識,會對項目理解非常有幫助:
項目功能:
最新技術棧:基于Vue3、Vite、TypeScript等最新技術棧開發。
輕量快速的熱重載:無論應用程序大小如何,都始終極快的模塊熱重載(HMR)。
豐富的示例:常見的Web端插件示例實現。
組件封裝:對日常使用頻率較高的組件二次封裝,滿足基礎工作需求。
主題配置:豐富的主題配置及黑暗主題適配。
- 關于黑暗主題:項目已經內置了黑暗主題切換,只需配置自己需要的顏色變量,即可在項目中使用。
- 原理:通過 vite-plugin-theme 插件,將所有的顏色變量抽取到獨立的 css 文件,并且全部在 html 上面加上 css 選擇器。通過改變 html 標簽的 data-theme 屬性來進行黑暗主題切換。
權限管理:完善的前后端權限管理方案
注意的是:本地開發推薦使用Chrome 最新版瀏覽器,不支持Chrome 80以下版本。生產環境支持現代瀏覽器,不支持IE。
2、NAIve Ui Admin
基于 vue3,vite2,TypeScript,搭配使用 [Naive Ui](Naive UI) 組件庫形成一套開箱即用的中后臺前端解決方案。
Naive Ui Admin 遵守 Naive Ui 組件設計和開發約定,風格統一,它使用了最新的前端技術棧,并提煉了典型的業務模型,頁面,包括二次封裝組件、動態菜單、權限校驗、粒子化權限控制等功能,它可以幫助你快速搭建企業級中后臺項目。
它的特點:
- 開箱即用的中后臺框架/讓你少寫一些代碼。
- 提供開箱即用的企業級前后端產品,可節約大量時間直接開發業務。
- 多生態支持:為企業產品提供多 UI 生態支持,新老項目開發或重構,均可以最優開發成本,快速上線。
- 從框架層面,業務層面,頁面擴展性/組合性,真正開箱即用,小白也能輕松上手。
- 實用模板:從眾多系統以及業務中,摘取實用性較高且通用的頁面設計,輕松構建規范且美觀的系統。
常見問題:
- 如果頁面語法是 script setup 那么需要在上面在寫一個 export default { name: 'pageName' }。
- 如果不是,那就在 defineComponent 中定義 name 就好了。
- 可以借助 vite-plugin-vue-setup-extend 插件。
提示:目前框架只支持到,二級菜單,無法支持二級以上的菜單,Plus 版本已支持。
3、SCUI Admin
一款功能強大的 admin 框架,很多復雜的業務組件、頁面模板都有,專業程度堪比付費的產品。
SCUI Admin基于 Vue3、elementPlus 持續性的提供獨家組件和豐富的業務模板幫助你快速搭建企業級中后臺前端任務。不僅免費開源,還有很多現成的業務組件、頁面模板。
項目特點:
- 簡潔至上:憑借VUE組件化開發,以最小的代碼量和最少的時間幫助你專注于業務。
- 可用性:在超高可用性和視覺信息上做了個平衡,一切以用戶體驗為第一標準。
- 高性能:在提高前端算力、減少帶寬請求和代碼執行力上多次優化,并且持續著。
構建與部署:
- 當項目編寫完成后,只需要一行命令就會打包你的應用。
- 等待打包完成后在根目錄生成dist文件夾。里面就是打包構建好的文件。接著可以把這個文件夾發給部署人員啦。
框架核心:
4、vue-pure-admin
vue-pure-admin是一個免費開源的中后臺模版。使用了最新的vue3 vite2 Element-Plus TypeScript等主流技術開發,開箱即用的中后臺前端解決方案,也可用于學習參考。