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

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

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

接下來我將一一列舉一下這幾個強大的管理后臺模版，并聊聊他們的特點，如果你剛好有這樣的需求，也不妨參考一下。

1. Vue vben admin

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

特點

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

界面展示

大家可以左右滑動來切換圖片:)

2. ant-simple-pro

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

前序準備

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

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的基本語法

界面展示

大家可以左右滑動來切換圖片:)

3. vue3-template-admin

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

使用到的插件/庫

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

界面展示

大家可以左右滑動來切換圖片:)

4. vue-admin-box

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

功能特色

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

界面展示

大家可以左右滑動來切換圖片:)

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

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