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