在线预览 | 官方文档
## 项目介ç»
[mall-admin](https://gitee.com/youlaiorg/mall-admin) 是基于 [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) å‡çº§çš„ Vue3 版本有æ¥å•†åŸŽç®¡ç†å‰ç«¯å·¥ç¨‹ï¼›ä½¿ç”¨å‰ç«¯ä¸»æµæŠ€æœ¯æ ˆ Vue3 + Vite4 + TypeScript5 + Vue Router + Pinia + Volar + Element Plus ç‰ï¼›å®žçŽ°åŠŸèƒ½åŒ…括ä¸é™äºŽåŠ¨æ€æƒé™è·¯ç”±ã€æŒ‰é’®æƒé™æŽ§åˆ¶ã€å›½é™…化ã€ä¸»é¢˜å¤§å°åˆ‡æ¢ç‰ã€‚
## 项目优势
- 基于 vue-element-admin å‡çº§çš„ Vue3 版本 ，æžæ˜“上手，å‡å°‘å¦ä¹ æˆæœ¬ï¼›
- 一套完整适é…çš„å¾®æœåŠ¡æƒé™ç³»ç»Ÿçº¿ä¸ŠæŽ¥å£ï¼Œä¼ä¸šçº§çœŸå®žå‰åŽç«¯æŽ¥å…¥åœºæ™¯ï¼Œéž Mock æ•°æ®ï¼›
- 功能全é¢ï¼šå›½é™…化ã€åŠ¨æ€è·¯ç”±ã€æŒ‰é’®æƒé™ã€ä¸»é¢˜å¤§å°åˆ‡æ¢ã€Echartsã€wangEditorï¼›
- TypeScript å…¨é¢æ”¯æŒï¼ŒåŒ…括组件和 API 调用层é¢ï¼›
- ä¸»æµ Vue3 生æ€å’Œå‰ç«¯æŠ€æœ¯æ ˆï¼Œå¸¸ç”¨ç»„件æžç®€å°è£…ï¼›
- 从 0 到 1 的项目文档支æŒï¼›
- å…¨æ ˆæŠ€æœ¯æ”¯æŒ: å¾®æœåŠ¡æŽ¥å£ã€Vue3 管ç†å‰ç«¯ã€uni-app 移动端和 K8S æŒç»é›†æˆäº¤ä»˜ï¼›
## æŠ€æœ¯æ ˆ
| æŠ€æœ¯æ ˆ | æè¿° | 官网 |
| ------------ | -------------------------------------- | ------------------------------------ |
| Vue3 | æ¸è¿›å¼ JavaScript 框架 | https://v3.cn.vuejs.org/ |
| TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ |
| Vite | å‰ç«¯å¼€å‘与构建工具 | https://cn.vitejs.dev/ |
| Element Plus | 基于 Vue 3，é¢å‘设计师和开å‘者的组件库 | https://element-plus.gitee.io/zh-CN/ |
| Pinia | 新一代状æ€ç®¡ç†å·¥å…· | https://pinia.vuejs.org/ |
| Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ |
## 项目预览
在线预览地å€: [admin.youlai.tech](http://admin.youlai.tech)
|  |  |
| ----------------------------------------------------------- | --------------------------------------------------------- |
|  |  |
|  |  |
## 项目地å€
| | Gitee | Github | GitCode |
| ------------------ | -------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------- |
| å¼€æºç»„织 | [有æ¥å¼€æºç»„织](https://gitee.com/youlaiorg) | [有æ¥å¼€æºç»„织](https://github.com/youlaitech) | [有æ¥å¼€æºç»„织](https://gitcode.net/youlai) |
| 技术团队 | [有æ¥æŠ€æœ¯å›¢é˜Ÿ](https://gitee.com/youlaitech) | [有æ¥æŠ€æœ¯å›¢é˜Ÿ](https://github.com/youlaitech) | - |
| åŽç«¯ | [youlai-mall](https://gitee.com/youlaiorg/youlai-mall) | [youlai-mall](https://github.com/youlaitech/youlai-mall) | [youlai-mall](https://gitcode.net/youlai/youlai-mall) |
| 管ç†å‰ç«¯ | [mall-admin](https://gitee.com/youlaiorg/mall-admin) | [mall-admin](https://github.com/youlaitech/mall-admin) | [mall-admin](https://gitcode.net/youlai/mall-admin) |
| å°ç¨‹åº/H5/移动端 | [mall-app](https://gitee.com/youlaiorg/mall-app) | [mall-app](https://github.com/youlaitech/mall-app) | [mall-app](https://gitcode.net/youlai/mall-app) |
| vue3-element-admin | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | - |
## å¯åŠ¨éƒ¨ç½²
### 环境准备
- 安装 Node
版本：16+
- å¼€å‘工具
VSCode
- 必装æ’件
- Vue Language Features (Volar)
- TypeScript Vue Plugin (Volar)
### 项目å¯åŠ¨
> 默认åŽç«¯æŽ¥å£åœ°å€ http://localhost:9999 ，如需替æ¢æŽ¥å£åœ°å€ï¼Œæ›¿æ¢ .env.development 的代ç†ç›®æ ‡åœ°å€ VITE_APP_TARGET_URL 的值为您的接å£åœ°å€ã€‚
1. pnpm install
2. pnpm run dev
3. æµè§ˆå™¨è®¿é—® http://localhost:9527
### 项目部署
- 本地打包
```
npm run build:prod
```
生æˆçš„é™æ€æ–‡ä»¶ä½äºŽé¡¹ç›®æ ¹ç›®å½• dist 文件夹下
- nginx.cofig é…ç½®
```
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/web;
index index.html index.htm;
}
# 代ç†è½¬å‘请求至网关，prod-apiæ ‡è¯†è§£å†³è·¨åŸŸé—®é¢˜
location /prod-api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass https://api.youlai.tech/;
}
}
```
## 交æµç¾¤ 🚀
> 关注「有æ¥æŠ€æœ¯ã€å…¬ä¼—å·ï¼ŒèŽ·å–交æµç¾¤äºŒç»´ç 。
>
> 如果交æµç¾¤çš„二维ç è¿‡æœŸï¼ŒåŠ æˆ‘å¾®ä¿¡ï¼Œå¤‡æ³¨ã€Œå‰ç«¯ã€ã€ã€ŒåŽç«¯ã€æˆ–ã€Œå…¨æ ˆã€å³å¯ã€‚
>
> 为了é¿å…è¥é”€å¹¿å‘Šäººç¾¤æ··å…¥ï¼Œæ¤ä¸¾æ— 奈，望ç†è§£ï¼
| å…¬ä¼—å· | 交æµç¾¤ |
| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
| 
| 
|