vue3-element-admin 技术文档

1. 安装指南

环境要求

• 开发工具：Visual Studio Code（推荐）
• 运行环境：Node.js 18+（推荐22.9.0版本）
• 包管理器：pnpm（项目默认使用）

安装步骤

1. 克隆项目代码：

git clone https://gitee.com/youlaiorg/vue3-element-admin.git

2. 进入项目目录：

cd vue3-element-admin

3. 安装pnpm（如未安装）：

npm install pnpm -g

4. 设置镜像源（可选）：

pnpm config set registry https://registry.npmmirror.com

5. 安装项目依赖：

pnpm install

6. 启动开发服务器：

pnpm run dev

2. 项目使用说明

主要功能

• 系统管理：用户管理、角色管理、菜单管理、部门管理、字典管理
• 权限控制：动态路由、按钮权限、角色权限、数据权限
• 基础设施：国际化支持、多布局切换、暗黑模式、全屏功能、水印功能
• 开发工具：接口文档集成、代码生成器

开发模式

• Mock数据：修改.env.development中的VITE_MOCK_DEV_SERVER为true启用本地Mock
• 线上接口：默认使用线上接口文档（需网络连接）

3. API使用文档

接口配置

• 开发环境接口基础路径配置在.env.development文件中：

VITE_APP_API_URL=https://api.youlai.tech

• 如需连接本地Java后端（youlai-boot），修改为：

VITE_APP_API_URL=http://localhost:8989

接口调用示例

项目使用Axios进行HTTP请求，封装了统一的请求方法。示例：

import { request } from '@/utils/request'

// GET请求示例
export function getList(params) {
  return request({
    url: '/api/list',
    method: 'get',
    params
  })
}

// POST请求示例
export function addData(data) {
  return request({
    url: '/api/add',
    method: 'post',
    data
  })
}

4. 项目部署

构建生产版本

pnpm run build

构建完成后会在项目根目录生成dist文件夹，包含所有静态资源文件。

Nginx配置

将dist目录内容上传至服务器/usr/share/nginx/html目录，配置Nginx示例如下：

server {
    listen      80;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /prod-api/ {
        proxy_pass http://api.youlai.tech/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

注意事项

1. 确保Node.js版本符合要求（推荐22.9.0）
2. 项目更新后建议重新安装依赖（pnpm install）
3. 如遇组件爆红问题，可尝试重启VSCode
4. 浏览器访问空白可能是浏览器版本过低导致