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

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

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

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

1. Vue vben admin

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

特點(diǎn)

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

界面展示

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

2. ant-simple-pro

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

前序準(zhǔn)備

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

vue

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

react

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

angular

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

界面展示

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

3. vue3-template-admin

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

使用到的插件/庫

• eslint-plugin-vueeslint-plugin-vue
• axios 強(qiáng)大的前端請(qǐng)求庫
• fues.jsfues.js 前端模糊搜索
• echartechart 數(shù)據(jù)可視化
• antvantv 螞蟻數(shù)據(jù)可視化
• xlsxxlsx SheetJS
• jszipjszip 優(yōu)秀的前端壓縮庫
• mockjsmockjs 模擬和交互數(shù)據(jù)
• wangeditorwangeditor 富文本編輯器
• fullcalendarfullcalendar 豐富的日歷插件

界面展示

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

4. vue-admin-box

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

功能特色

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

界面展示

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

更多優(yōu)秀項(xiàng)目推薦

好了，今天的分享就到這里了，如果大家對(duì)可視化搭建或者低代碼/零代碼感興趣，也可以在 趣談前端 中查閱我往期的文章或者說出你的想法和心得，一起探索前端真正的技術(shù)。