這幾款基于Vue3和Vite的開(kāi)箱即用的中后臺(tái)管理模版，讓你yyds！

作者：徐小夕 2021-08-19 08:15:51

我最近一直在做前端可視化和低代碼相關(guān)的項(xiàng)目和技術(shù)分享，剛好找到幾款基于vue3和vite的開(kāi)箱即用的中后臺(tái)管理模版，可以用到可視化項(xiàng)目中，所以這里特意做個(gè)總結(jié)，和大家分享一下。

[[418389]]

我們都知道 vue3 已經(jīng)發(fā)布一年多了，相關(guān)的生態(tài)也在慢慢建立，很多公司也在嘗試用 vue3 來(lái)開(kāi)發(fā)自己的應(yīng)用系統(tǒng)。但是由于生態(tài)的不完善以及缺乏成熟方案的落地，vue3 的應(yīng)用仍然探索和小規(guī)模試驗(yàn)中。

好在開(kāi)源界無(wú)私奉獻(xiàn)的大佬們提前做了很多探索和嘗試，比如面向 vue3 的 UI 組件庫(kù) element Plus，ant-desigin-vue 等，同時(shí)基于這些 UI 庫(kù)，又有一批大佬封裝了針對(duì)企業(yè)業(yè)務(wù)場(chǎng)景的中后臺(tái)管理模版，方便我們高效的搭建業(yè)務(wù)系統(tǒng)。

接下來(lái)我將一一列舉一下這幾個(gè)強(qiáng)大的管理后臺(tái)模版，并聊聊他們的特點(diǎn)，如果你剛好有這樣的需求，也不妨參考一下。

1. Vue vben admin

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

特點(diǎn)

最新技術(shù)棧：使用 Vue3/vite2 等前沿技術(shù)
TypeScript: 應(yīng)用程序級(jí) JavaScript 的語(yǔ)言
主題：可配置的主題
國(guó)際化：內(nèi)置完善的國(guó)際化方案
Mock 數(shù)據(jù) 內(nèi)置 Mock 數(shù)據(jù)方案
權(quán)限內(nèi)置完善的動(dòng)態(tài)路由權(quán)限生成方案
組件二次封裝了多個(gè)常用的組件

界面展示

大家可以左右滑動(dòng)來(lái)切換圖片:)

2. ant-simple-pro

ant-simple-pro 是一款支持 vue3.0，react，angular，typescript 等多框架支持的中臺(tái)前端解決方案，ui 使用 antd 實(shí)現(xiàn)的，它使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國(guó)際化解決方案，動(dòng)態(tài)路由，響應(yīng)式設(shè)計(jì)，開(kāi)箱即用，而且我們寫(xiě)了很多支持 vue3 的插件和庫(kù)，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型，不管你是 vue 開(kāi)發(fā)者，還是 react 或者 angular，都能在這里找到你想要的版本。

前序準(zhǔn)備

你需要在本地安裝 node 和 git，異步請(qǐng)求數(shù)據(jù)用axios，所有的異步接口均采用node+typescript+mysql+docker實(shí)現(xiàn)的，所以最好先了解如下知識(shí)：

vue

vue3.0的新語(yǔ)法，如setup,hooks等合成api
vue-cil,vue-router,vuex等全家桶

react

react基本語(yǔ)法，如hooks,class創(chuàng)建組件，函數(shù)式創(chuàng)建組件等
react全家桶要熟悉，如react-router-dom，create-react-app,react-transition-group等
react數(shù)據(jù)狀態(tài)庫(kù)，redux,redux-saga,reselect,react-redux等
react在typescript下的FC模式等

angular

angular的基本語(yǔ)法，如html模板，指令，組件等
angular的全家桶，如angular-cil,Rx等
typescript的基本語(yǔ)法

界面展示

大家可以左右滑動(dòng)來(lái)切換圖片:)

3. vue3-template-admin

vue3-template-admin 是一款基于 vue3 + vite + element plus 的后臺(tái)管理模版，它集成了我們業(yè)務(wù)開(kāi)發(fā)的大部分功能，比如文本編輯器，全站搜索，權(quán)限管理，可視化圖表等。

使用到的插件/庫(kù)

eslint-plugin-vue eslint-plugin-vue
axios 強(qiáng)大的前端請(qǐng)求庫(kù)
fues.js fues.js 前端模糊搜索
echart echart 數(shù)據(jù)可視化
antv antv 螞蟻數(shù)據(jù)可視化
xlsx xlsx SheetJS
jszip jszip 優(yōu)秀的前端壓縮庫(kù)
mockjs mockjs 模擬和交互數(shù)據(jù)
wangeditor wangeditor 富文本編輯器
fullcalendar fullcalendar 豐富的日歷插件

界面展示

大家可以左右滑動(dòng)來(lái)切換圖片:)

4. vue-admin-box

vue-admin-box 是一個(gè)免費(fèi)并且開(kāi)源的中后臺(tái)管理系統(tǒng)模板。使用最新版本的 vue3+vite+element-plus 開(kāi)發(fā)而成，目的是為了解決通用型的業(yè)務(wù)中后臺(tái)系統(tǒng)復(fù)雜的配置。

功能特色

適合中后臺(tái)開(kāi)發(fā)的路由配置、狀態(tài)管理機(jī)制(狀態(tài)默認(rèn)支持本地存儲(chǔ))、已封裝完善的axios及api管理機(jī)制
極方便擴(kuò)展的主題配置功能，默認(rèn)支持三種典型的中后臺(tái)風(fēng)格
簡(jiǎn)易配置的頁(yè)面緩存功能，只需配置noCache屬性，無(wú)需配置其他的任何屬性，如組件名稱，路由名稱等等很多框架需要配置的東西
典型增刪改查的三種業(yè)務(wù)表格，詳情請(qǐng)查看“頁(yè)面欄目”內(nèi)的“業(yè)務(wù)表格”、“分類聯(lián)動(dòng)表格”、“樹(shù)聯(lián)動(dòng)表格”
支持緩存頁(yè)面刷新，目前了解的多數(shù)框架都不支持緩存頁(yè)面的刷新方便擴(kuò)展的國(guó)際化解決方案，并提供了兩套非國(guó)際化的基礎(chǔ)模板和兩套國(guó)際化的基礎(chǔ)模板(ts版本/js版本)
手寫(xiě)版本的各類自定義指令
已經(jīng)過(guò)多個(gè)中后臺(tái)業(yè)務(wù)檢驗(yàn)過(guò)的表格公用組件及彈窗公用組件，詳情請(qǐng)查看“頁(yè)面欄目”內(nèi)的“業(yè)務(wù)表格”、“分類聯(lián)動(dòng)表格”、“樹(shù)聯(lián)動(dòng)表格”