vue3-admin-template 項目地址：vue3-admin-template 能拿來直接開發項目，不需要考慮格式化配置、打包編譯優化等等，難道它不香嗎？~~ 此項目是集成vue3 + vite + Element-Plus + Pinia + vue-router的後臺管理系統的模板工程 ...
vue3-admin-template
項目地址：vue3-admin-template
能拿來直接開發項目，不需要考慮格式化配置、打包編譯優化等等，難道它不香嗎？~~
此項目是集成vue3 + vite + Element-Plus + Pinia + vue-router的後臺管理系統的模板工程。
即開即用，提供初創團隊或新項目專註於快速啟動和開發交易。不再考慮腳手架編譯打包和優化、ESLlint統一配置、項目和編碼規範等問題。
參考、借鑒vue-element-admin項目。
在打開vscode時根據提示安裝上推薦插件。
內容(Content)
包含以下內容：
- 許可權管理模塊
定義後臺人員、角色、角色許可權三個模塊和mock數據。 - vite腳手架
解決了vite腳手架存在的一些問題。vite的預設打包配置已做優化。 - vue-router
- store存儲 - pinia
- 配置推薦插件
.vscode/extensions.json中配置了推薦插件，在打開vscode時根據提示安裝上推薦插件即可。比如：- vue-volar-extention-pack -- vue3插件全家桶
- eamodio.gitlens -- git記錄查看工具
- gruntfuggly.todo-tree --查看TODO事項
- lihuiwang.vue-alias-skip --別名路徑可以點擊快速跳轉查看
- 提供插件方式
router、store、plugins、directive目錄可直接創建文件，自動動態引入載入。 - 引入auto-import機制
引入unplugin-auto-import/vite插件，可自動引入載入組件和vue、vue-router的API - ESLint + Prettier配置
- 區分環境變數與配置
區分dev調試環境、dev的build構建環境、test構建環境、生產構建環境。 - 支持TypeScript開發
api介面的參數params建議都要定義參數對象屬性和類型 - libs工具庫
提供了倒計時、數據檢查器、加密器、存儲器、類型檢查器等
組件(Components)
-
具有SvgIcon組件
路徑：components/SvgIcon/index.vue
可以使用SvgIcon展示svg格式的ICON。
使用svg做icon優於font icon。 -
列表頁面組件
路徑：common/ListPage.vue
通過config.ts配置快速創建表格頁面的快速開發，同時也規範統一了表格頁面的組件佈局和組件樣式，可參考views/admin/user/index.vue
若差異化較大列表頁面，可參考"common/ListPage.vue"頁面複製後重寫。 -
信息詳情欄位單元組件
路徑：common/DetailCell.vue
主要為了規範統一訂單詳情頁欄位的顯示樣式。
編寫訂單詳情頁可參考views/admin/user/Detail.vue -
新增編輯頁組件
路徑：components/DynForm/index.jsx
可以實現編輯頁面欄位的增量更新，避免只修改一個欄位更新全部欄位的問題。
規範統一訂單詳情頁欄位的顯示樣式。
編寫訂單詳情頁可參考？？
規範文檔
項目和編碼規範文檔是致力於為初創企業、初創團隊、新項目提供統一的規範，方便項目快速啟動，團隊協作，保障質量。
建議約定團隊成員安裝如下項目和編碼規範開發。
點擊查看 前端項目和編碼規範
主要分享以下幾方面：
- 前端統一標準規範
- 約定項目規範，提高代碼可讀性，方便團隊新成員快速加入項目開發。
約定編碼風格和規範，規避一些技術踩坑，提升代碼質量。（包含Vue、React等編碼規範） - git管理
- 工程配置
- 編程小技巧
- 性能優化
- FAQ查詢
- Vue、Nest、Rect等項目工程模板
會對工程模板有詳細的文檔說明，模板可支持項目快速啟動。
特性(Features)
License
MIT
可參考阮一峰老師的開源協議說明
三十歲之前做別人要你做的事，三十歲之後學著稀里糊塗做自己的事。
