## 官方文档

<a target="_blank" href="https://catchadmin.com/docs/3.0/intro">官方文档</a>

## 项目介绍
复制 .env.example 重名名为：一下文件
.env.development
.env.production
.env.staging

本项目是基于 [catchAdmin](https://gitee.com/catchadmin/catchAdmin) 抽离的 Vue3 版本后台管理前端解决方案；使用前端主流技术栈 Vue3 + Vite4 + TypeScript + Vue Router + Pinia + Element Plus 等；实现功能包括不限于动态权限路由、按钮权限控制、国际化、主题大小切换等；

## 项目优势

- 基于 vue-element-admin 升级的 Vue3 版本 ，极易上手，减少学习成本；
- 一套完整适配的微服务权限系统线上接口；
- 功能全面：国际化、动态路由、按钮权限、主题大小切换；
- TypeScript 全面支持，包括组件和 API 调用层面；
- 主流 Vue3 生态和前端技术栈，常用组件极简封装；

## 技术栈

| 技术栈 | 描述 | 官网 |
| --- | --- | --- |
| 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/ |

## 环境要求

- Node 环境

  版本：16+

- 开发工具

  VSCode

- 必装插件

  - Vue Language Features (Volar)
  - TypeScript Vue Plugin (Volar)

## 项目启动

1. 安装依赖

   ```bash
   npm install | pnpm install
   ```

2. 启动运行

   ```bash
   npm run dev | pnpm dev
   ```



## 项目部署

- 本地打包

  ```bash
  npm run build | pnpm build
  ```

  生成的静态文件位于项目根目录 `dist` 文件夹下

- 上传文件

  创建 `/mnt/nginx/html` 目录，将打包生成 `dist` 下的所有文件拷贝至此工作目录下

- nginx.cofig 配置

  ```bash
  server {
      listen     80;
      server_name  localhost;

      location / {
          root /mnt/nginx/html;
          index index.html index.htm;
      }

      # 代理转发请求至网关，prod-api标识解决跨域,vapi.youlai.tech 线上接口地址，注意后面/
      location /prod-api/ {
          proxy_pass http://vapi.youlai.tech/;
      }
  }

  ```