vue3-element-adminvue3 版本后臺管理解決方案
vue3-element-admin 是基于 vue-element-admin 升級的 Vue3 + Element Plus 版本的后臺管理框架，是有來技術(shù)團(tuán)隊繼 youlai-mall 開源全棧商城項目的又一開源力作。
項目使用 Vue3 + Vite2 + TypeScript + Element Plus + Vue Router + Pinia + Volar 等前端主流技術(shù)棧，基于此項目模板完成有來商城管理前端的 Vue3 版本。
本篇先對本項目功能、技術(shù)棧進(jìn)行整體概述，再細(xì)節(jié)的講述從 0 到 1 搭建 vue3-element-admin，在希望大家對本項目有個完完整整整了解的同時也能夠在學(xué) Vue3 + TypeScript 等技術(shù)棧少花些時間，少走些彎路，這樣團(tuán)隊在毫無保留開源才有些許意義。
功能清單
技術(shù)棧清單
| 技術(shù)棧 | 描述 | 官網(wǎng) |
|---|---|---|
| Vue3 | 漸進(jìn)式 JavaScript 框架 | https://v3.cn.vuejs.org/ |
| TypeScript | 微軟新推出的一種語言，是 JavaScript 的超集 | https://www.tslang.cn/ |
| Vite2 | 前端開發(fā)與構(gòu)建工具 | https://cn.vitejs.dev/ |
| Element Plus | 基于 Vue 3，面向設(shè)計師和開發(fā)者的組件庫 | https://element-plus.gitee.io/zh-CN/ |
| Pinia | 新一代狀態(tài)管理工具 | https://pinia.vuejs.org/ |
| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |
| wangEditor | Typescript 開發(fā)的 Web 富文本編輯器 | https://www.wangeditor.com/ |
| Echarts | 一個基于 JavaScript 的開源可視化圖表庫 | https://echarts.apache.org/zh/ |
環(huán)境準(zhǔn)備
-
安裝 Node
版本：16+
-
開發(fā)工具
VSCode
-
必裝插件
- Vue Language Features (Volar)
- TypeScript Vue Plugin (Volar)
項目啟動
- npm install
- npm run dev
- 訪問 http://localhost:3000
項目部署
-
本地打包
npm run build:prod生成的靜態(tài)文件位于項目根目錄 dist 文件夾下
-
上傳文件
創(chuàng)建
/usr/local/nginx/html/vue3目錄，將打包生成 dist 的所有文件拷貝至此工作目錄下 -
nginx.cofig 配置
server { listen 80; server_name localhost; location / { root /usr/local/nginx/html/vue3; index index.html index.htm; } # 代理轉(zhuǎn)發(fā)請求至網(wǎng)關(guān)，prod-api標(biāo)識解決跨域問題 # vapi.youlai.tech 線上接口地址 location /prod-api/ { proxy_pass http://vapi.youlai.tech/; } }
本地接口
如果你了解一點(diǎn)Java后端SpringBoot，可輕松在本地搭建接口環(huán)境.
-
訪問后端項目倉庫地址：https://gitee.com/youlaiorg/youlai-boot.git
-
根據(jù)項目說明文檔 README.md 的描述完成數(shù)據(jù)庫的創(chuàng)建和后端工程的啟動；
-
進(jìn)入 vite.config.ts 文件修改代理線上接口地址 http://vapi.youlai.tech 為本地接口地址 http://localhost:8989 即可。