【vue3-element-admin 】基於 Vue3 + Vite4 + TypeScript + Element-Plus 從0到1搭建後臺管理系統（前後端開源@有來開源組織）
2023-04-21 09:01:01
vue3-element-admin 是基於 vue-element-admin 升級的 Vue3 + Element Plus 版本的後臺管理前端解決方案，技術棧為 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等當前主流框架。
相較於其他管理前端框架，vue3-element-admin 的優勢在於一有一無 (有配套後端、無複雜封裝)：
配套完整 Java 後端 許可權管理介面，開箱即用，提供 OpenAPI 檔案 搭配 Apifox 生成 Node、Python、Go等其他伺服器端程式碼；
完全基於 vue-element-admin 升級的 Vue3 版本，沒有對框架(Element Plus)的元件再封裝，上手成本低和擴充套件性高。
前言
本篇是 vue3-element-admin v2.x 版本從 0 到 1，相較於 v1.x 版本 主要增加了對原子CSS(UnoCSS)、按需自動匯入、暗黑模式的支援。
閱讀前的兩條宣告：
-
部落格有時效性，原始碼會一直更新，本篇原始碼
tag版本 vue3-element-admin v2.2.0 ； -
各章節會有先後順序依賴關係，例如：安裝 Element Plus 需要先安裝自動匯入等，建議按照順序完成0到1，當然也可各取所需。
專案預覽
線上預覽
首頁控制檯
 |
|---|
 |
介面檔案
許可權管理系統
 |
 |
|---|---|
 |
 |
擴充套件生態
youlai-mall 有來開源商城：Spring Cloud微服務+ vue3-element-admin+uni-app
| youlai-mall 商品管理 | mall-app 行動端 |
|---|---|
 |
 |
專案指南
功能清單
技術棧&官網
| 技術棧 | 描述 | 官網 |
|---|---|---|
| Vue3 | 漸進式 JavaScript 框架 | https://cn.vuejs.org/ |
| Element Plus | 基於 Vue 3，面向設計師和開發者的元件庫 | https://element-plus.gitee.io/zh-CN/ |
| Vite | 前端開發與構建工具 | https://cn.vitejs.dev/ |
| TypeScript | 微軟新推出的一種語言，是 JavaScript 的超集 | https://www.tslang.cn/ |
| Pinia | 新一代狀態管理工具 | https://pinia.vuejs.org/ |
| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |
| wangEditor | Typescript 開發的 Web 富文字編輯器 | https://www.wangeditor.com/ |
| Echarts | 一個基於 JavaScript 的開源視覺化圖表庫 | https://echarts.apache.org/zh/ |
| vue-i18n | Vue 國際化多語言外掛 | https://vue-i18n.intlify.dev/ |
| VueUse | 基於Vue組合式API的實用工具集(類比HuTool工具) | http://www.vueusejs.com/ |
前/後端原始碼
| Gitee | Github | |
|---|---|---|
| 前端 | vue3-element-admin | vue3-element-admin |
| 後端 | youlai-boot | youlai-boot |
介面檔案
- 介面呼叫地址：https://vapi.youlai.tech
- 介面檔案地址：線上介面檔案
- OpenAPI 3.0 檔案地址：http://vapi.youlai.tech/v3/api-docs
環境準備
| 名稱 | 備註 | |
|---|---|---|
| 開發工具 | VSCode 下載 | - |
| 執行環境 | Node 16+ 下載 |  |
| VSCode外掛(必裝) | 外掛市場搜尋 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 安裝，且禁用 Vetur |
 |