我最近一直在做前端可視化和低代碼相關(guān)的項(xiàng)目和技術(shù)分享，最近剛好找到幾款基于vue3和vite的開(kāi)箱即用的中后臺(tái)管理模版，可以用到可視化項(xiàng)目中，所以這里特意做個(gè)總結(jié)，和大家分享一下。
我們都知道 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)表格”
界面展示
大家可以左右滑動(dòng)來(lái)切換圖片:)
<更多優(yōu)秀項(xiàng)目推薦
可以使用冒號(hào)來(lái)定義表格的對(duì)齊方式，如下：
| 項(xiàng)目名 | 描述 |
|---|---|
| h5-dooring | H5可視化頁(yè)面編輯器 |
| v6.dooring | 可視化大屏編輯器 |
| mitu | 輕量級(jí)圖片編輯器 |
| dooringx-lib | 可視化搭建解決方案 |
| powerNice | 多功能文檔編輯器 |
| luckySheet | 基于web的電子表格工具 |
好了，今天的分享就到這里了，如果大家對(duì)可視化搭建或者低代碼/零代碼感興趣，也可以在 趣談前端 中參考我往期的文章或者在評(píng)論區(qū)交流你的想法和心得，歡迎一起探索前端真正的技術(shù)。
如果文章對(duì)你有幫助，你也可以點(diǎn)贊 + 轉(zhuǎn)發(fā), 鼓勵(lì)作者持續(xù)創(chuàng)作。
