我最近一直在做前端可視化和低代碼相關的項目和技術分享，最近剛好找到幾款基于vue3和vite的開箱即用的中后臺管理模版，可以用到可視化項目中，所以這里特意做個總結，和大家分享一下。
我們都知道 vue3 已經發布一年多了，相關的生態也在慢慢建立，很多公司也在嘗試用 vue3 來開發自己的應用系統。但是由于生態的不完善以及缺乏成熟方案的落地，vue3 的應用仍然探索和小規模試驗中。
好在開源界無私奉獻的大佬們提前做了很多探索和嘗試，比如面向 vue3 的 UI 組件庫 element Plus，ant-desigin-vue 等，同時基于這些 UI 庫，又有一批大佬封裝了針對企業業務場景的中后臺管理模版，方便我們高效的搭建業務系統。
接下來我將一一列舉一下這幾個強大的管理后臺模版，并聊聊他們的特點，如果你剛好有這樣的需求，也不妨參考一下。
1. Vue vben admin
Vue Vben Admin 是一個免費開源的中后臺模版。使用了最新的 vue3, vite2, TypeScript 等主流技術開發，開箱即用的中后臺前端解決方案，也可用于學習參考。
特點
- 最新技術棧：使用 Vue3/vite2 等前沿技術
- TypeScript: 應用程序級 JavaScript 的語言
- 主題：可配置的主題
- 國際化：內置完善的國際化方案
- Mock 數據 內置 Mock 數據方案
- 權限 內置完善的動態路由權限生成方案
- 組件 二次封裝了多個常用的組件
界面展示
大家可以左右滑動來切換圖片:)
<2. ant-simple-pro
ant-simple-pro 是一款支持 vue3.0，react，angular，typescript 等多框架支持的中臺前端解決方案，ui 使用 antd 實現的，它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，響應式設計，開箱即用，而且我們寫了很多支持 vue3 的插件和庫，它可以幫助你快速搭建企業級中后臺產品原型，不管你是 vue 開發者，還是 react 或者 angular，都能在這里找到你想要的版本。
前序準備
你需要在本地安裝 node 和 git，異步請求數據用axios，所有的異步接口均采用node+typescript+mysql+docker實現的，所以最好先了解如下知識：
vue
- vue3.0的新語法，如setup,hooks等合成api
- vue-cil,vue-router,vuex等全家桶
react
- react基本語法，如hooks,class創建組件，函數式創建組件等
- react全家桶要熟悉，如react-router-dom，create-react-app,react-transition-group等
- react數據狀態庫，redux,redux-saga,reselect,react-redux等
- react在typescript下的FC模式等
angular
- angular的基本語法，如html模板，指令，組件等
- angular的全家桶，如angular-cil,Rx等
- typescript的基本語法
界面展示
大家可以左右滑動來切換圖片:)
<3. vue3-template-admin
vue3-template-admin 是一款基于 vue3 + vite + element plus 的后臺管理模版，它集成了我們業務開發的大部分功能，比如文本編輯器，全站搜索，權限管理，可視化圖表等。
使用到的插件/庫
- eslint-plugin-vue eslint-plugin-vue
- axios 強大的前端請求庫
- fues.js fues.js 前端模糊搜索
- echart echart 數據可視化
- antv antv 螞蟻數據可視化
- xlsx xlsx SheetJS
- jszip jszip 優秀的前端壓縮庫
- mockjs mockjs 模擬和交互數據
- wangeditor wangeditor 富文本編輯器
- fullcalendar fullcalendar 豐富的日歷插件
界面展示
大家可以左右滑動來切換圖片:)
<4. vue-admin-box
vue-admin-box 是一個免費并且開源的中后臺管理系統模板。使用最新版本的 vue3+vite+element-plus 開發而成，目的是為了解決通用型的業務中后臺系統復雜的配置。
功能特色
- 適合中后臺開發的路由配置、狀態管理機制（狀態默認支持本地存儲）、已封裝完善的axios及api管理機制
- 極方便擴展的主題配置功能，默認支持三種典型的中后臺風格
- 簡易配置的頁面緩存功能，只需配置noCache屬性，無需配置其他的任何屬性，如組件名稱，路由名稱等等很多框架需要配置的東西
- 典型增刪改查的三種業務表格，詳情請查看“頁面欄目”內的“業務表格”、“分類聯動表格”、“樹聯動表格”
- 支持緩存頁面刷新，目前了解的多數框架都不支持緩存頁面的刷新方便擴展的國際化解決方案，并提供了兩套非國際化的基礎模板和兩套國際化的基礎模板（ts版本/js版本）
- 手寫版本的各類自定義指令
- 已經過多個中后臺業務檢驗過的表格公用組件及彈窗公用組件，詳情請查看“頁面欄目”內的“業務表格”、“分類聯動表格”、“樹聯動表格”
界面展示
大家可以左右滑動來切換圖片:)
<更多優秀項目推薦
可以使用冒號來定義表格的對齊方式，如下：
| 項目名 | 描述 |
|---|---|
| h5-dooring | H5可視化頁面編輯器 |
| v6.dooring | 可視化大屏編輯器 |
| mitu | 輕量級圖片編輯器 |
| dooringx-lib | 可視化搭建解決方案 |
| powerNice | 多功能文檔編輯器 |
| luckySheet | 基于web的電子表格工具 |
好了，今天的分享就到這里了，如果大家對可視化搭建或者低代碼/零代碼感興趣，也可以在 趣談前端 中參考我往期的文章或者在評論區交流你的想法和心得，歡迎一起探索前端真正的技術。
如果文章對你有幫助，你也可以點贊 + 轉發, 鼓勵作者持續創作。
