南海區(qū)住房和城鄉(xiāng)建設(shè)部網(wǎng)站/提高網(wǎng)站排名軟件
大家好，我是 jonssonyan
今天和大家分享一些免費(fèi)開(kāi)源的后臺(tái)管理頁(yè)面，幫助大家快速搭建前端頁(yè)面。為什么要用模板？道理很簡(jiǎn)單，原因是方便我們快速開(kāi)發(fā)。我們不應(yīng)該花太多的時(shí)間在頁(yè)面調(diào)整上，而應(yīng)該把精力放在核心邏輯和業(yè)務(wù)上。
以我自己為例，說(shuō)一下我自己在開(kāi)發(fā)過(guò)程中的切身感受。我是一名后端程序員，同時(shí)也做一些前端開(kāi)發(fā)的事情，所以我的后端開(kāi)發(fā)速度肯定是比前端開(kāi)發(fā)要快的。每次寫新項(xiàng)目，第一后端開(kāi)發(fā)比較熟練，第二代碼可以復(fù)用，所以后端一般很快就能寫完。但是前端就恰恰相反，第一前端開(kāi)發(fā)沒(méi)有后端熟練，第二頁(yè)面盡量不要復(fù)用。為什么頁(yè)面盡量不要復(fù)用？主要原因是防止用戶審美疲勞，讓認(rèn)識(shí)你的用戶感覺(jué)怎么你開(kāi)發(fā)的系統(tǒng)都是一套 UI？所以這時(shí)候我們備用一些前端后臺(tái)管理模板就非常重要，能多備幾個(gè)就多備幾個(gè)，在自己需要的時(shí)候，幾分鐘就可以把前端搭建完畢，立刻進(jìn)入到業(yè)務(wù)開(kāi)發(fā)界面，省時(shí)省力，何樂(lè)而不為？
另外有些人可能不太善用模板代碼，有時(shí)候模板只是一個(gè)大致的框架，無(wú)論是前端模板還是后端模板，都不可能 100%符合我們的需求，需要我們按照自己的需求在上面更改。核心思路是將不需要的代碼刪掉，有時(shí)候系統(tǒng)不是越復(fù)雜越好，往往越簡(jiǎn)單，后期越容易維護(hù)。
善用模板的技巧就是，首先，找一個(gè)符合自己技術(shù)棧的模板，比如，你擅長(zhǎng)的技術(shù)棧是 Vue3+TS+Vite，那你找的模板就不能是 Vue2+JS 的。其次，模板最好是開(kāi)源并且持續(xù)更新，別等模板過(guò)了一段時(shí)間被商業(yè)化了，那自己就成了接盤俠，后期代碼只能自己維護(hù)了，導(dǎo)致自己的頁(yè)面有了 Bug 沒(méi)有及時(shí)修復(fù)，損失的還是我們自己，最好是去 GitHub 上面找模板，而且提交記錄最好是最近的時(shí)間（至少最近一年要有提交記錄吧）。其次，模板生態(tài)要好，要滿足絕大多數(shù)場(chǎng)景，組件足夠的豐富。 比如我們?cè)陂_(kāi)發(fā)過(guò)程中最常用的表格組件、上傳組件、登錄組件、按鈕、標(biāo)簽等等。最后，模板的兼容性要好。 對(duì)于常見(jiàn)的瀏覽器和常見(jiàn)的客戶端要兼容。自適應(yīng)要做好，方便電腦和手機(jī)上面用戶體驗(yàn)良好。
所以接下來(lái)我給大家推薦一些常用的后臺(tái)管理模板或者一些后臺(tái)管理模板的搜索網(wǎng)站，主要以最常見(jiàn)的 Vue 和 React 模板為例希望對(duì)大家有所幫助。
builtatlightspeed
https://www.builtatlightspeed.com/
builtatlightspeed 是一個(gè)模板搜索網(wǎng)站，里面的模板絕大大多數(shù)都是免費(fèi)的。最人性化的是可以按照技術(shù)棧搜索我們想要的模板。不僅僅是后臺(tái)管理模板，這個(gè)模板網(wǎng)站還可以搜索比如企業(yè)官網(wǎng)、宣傳頁(yè)等網(wǎng)站模板。真的是一個(gè)寶藏網(wǎng)站，強(qiáng)烈推薦。
Ant Design Pro
GitHub：https://github.com/ant-design/ant-design-pro/
文檔：https://pro.ant.design/zh-CN/
Ant Design 是我認(rèn)為生態(tài)最好的 UI 框架了。兼容 React 和 Vue，企業(yè)級(jí)后臺(tái)開(kāi)發(fā)最常用的前端腳手架。 Ant Design Pro 則可以幫助我們快速搭建一個(gè)后臺(tái)管理模板，只需要輸入一行命令，等待一段時(shí)間就可以擁有一個(gè)完善的模板。我認(rèn)為唯一的缺點(diǎn)就是功能太完善，我們改造時(shí)候刪除的代碼太多，大部分功能我們是用不到的，如果能出一個(gè)精簡(jiǎn)版就更好了。
npm i @ant-design/pro-cli -g // 安裝Ant Design Pro腳手架
pro create myapp // 創(chuàng)建Ant Design Pro模板項(xiàng)目
Vben Admin
GitHub：https://github.com/vbenjs/vue-vben-admin/tree/thin
ps：GitHub 地址是精簡(jiǎn)版，完整版在 main 分支
Vben Admin 是一個(gè)類似 Ant Design Pro 的開(kāi)箱即用的前端框架，UI 和色系和 Ant Design 是不一樣的，生態(tài)也比較好，組件也比較豐富。適用于絕大多數(shù)開(kāi)發(fā)場(chǎng)景。
Vue Admin Template
GitHub：https://github.com/PanJiaChen/vue-admin-template
GitHub：https://github.com/PanJiaChen/vue-element-admin
GitHub：https://github.com/Armour/vue-typescript-admin-template
這三個(gè)模板統(tǒng)一可以稱為 Vue Template，算作是一個(gè)生態(tài)里面的東西。
技術(shù)棧如下:
- vue-admin-template：Vue2+JS
- vue-element-admin：Vue2+JS
- vue-typescript-admin-template：Vue3+TS
ps: vue-admin-template 是 vue-element-admin 的精簡(jiǎn)版
根據(jù)自己的需要選擇適合自己的模板，這三個(gè)模板頁(yè)面的色系和組件樣式是一樣的。使用方法就是直接在 GitHub 上面 git clone 拉取到本地就可以了。
Mantis is React Dashboard Template
GitHub：https://github.com/codedthemes/mantis-free-react-admin-template
這是一個(gè) React 模板，自適應(yīng)做的很好，而且組件也比較豐富。UI 框架使用的是 MUI。
本期就和大家分享了一些我覺(jué)得還不多的后臺(tái)管理模板資源，如果對(duì)你有幫助，可以點(diǎn)一個(gè)免費(fèi)的贊，我是 jonssonyan，我們下期再見(jiàn)。