LyEdu 前端开发指南

编辑日期：2026-02-26
基于 ly-edu 项目结构整理

一、前端项目概览

LyEdu 前端采用多端架构，包含以下子项目：

项目	目录	技术栈	端口	说明
管理后台	lyedu-admin	Vue 3 + TypeScript + Vite + Element Plus	9900	管理员操作、课程/用户/考试等管理
PC 端	lyedu-pc	Vue 3 + TypeScript + Vite + Element Plus	9800	学员端 PC 学习界面
学员端 H5/小程序	lyedu-unix	uni-app x	-	H5、微信小程序等多端

二、开发环境准备

环境要求

• Node.js：18+
• 包管理器：npm / pnpm / yarn
• IDE：推荐 VS Code，学员端使用 HBuilderX 打开 lyedu-unix

克隆项目

git clone https://gitee.com/quxiangshun/ly-edu.git
cd ly-edu

三、各子项目开发说明

1. 管理后台（lyedu-admin）

cd lyedu-admin
npm install
npm run dev

• 入口：http://localhost:9900
• 配置文件：scripts/dev/dev-config.yml 中可配置 start_lyedu_admin: true
• 功能：课程管理、用户/部门管理、考试中心、系统配置、飞书集成等

2. PC 端（lyedu-pc）

cd lyedu-pc
npm install
npm run dev

• 入口：http://localhost:9800
• 功能：学员学习、视频播放、课程评论、知识中心、考试、证书、积分排行等

3. 学员端 H5/小程序（lyedu-unix）

• 使用 HBuilderX 打开 lyedu-unix 项目
• 运行到浏览器或微信开发者工具
• 技术栈：uni-app x，支持 H5、微信小程序等多端

四、一键启动（Windows）

项目提供一键开发脚本，详见 scripts/README.md：

# 首次：复制 dev-config.example.yml 为 dev-config.yml，按需修改
cp scripts/dev/dev-config.example.yml scripts/dev/dev-config.yml

# 启动
.\scripts\dev\start.ps1

# 停止
.\scripts\dev\stop.ps1

dev-config.yml 中可配置：

• start_lyedu_admin：是否启动管理后台
• start_lyedu_pc：是否启动 PC 端
• start_lyedu_api_python：是否启动 Python 后端（9700 端口）
• database / redis：MySQL、Redis 连接信息

五、技术栈与架构

公共技术

• Vue 3：Composition API、<script setup>
• TypeScript：类型安全
• Vite：快速构建
• Element Plus：管理后台、PC 端 UI 组件
• Pinia：状态管理
• Vue Router：路由
• Axios：HTTP 请求

API 对接

• 默认 API 地址：http://localhost:9700（Python 后端）或 http://localhost:8080（Java 后端）
• 认证：JWT，请求头 Authorization: Bearer <token>
• 具体接口见 API 文档

六、目录结构（示例：lyedu-admin）

lyedu-admin/
├── src/
│   ├── api/          # 接口封装
│   ├── assets/       # 静态资源
│   ├── components/   # 公共组件
│   ├── views/        # 页面视图
│   ├── router/       # 路由配置
│   ├── store/        # Pinia 状态
│   ├── utils/        # 工具函数
│   └── main.ts
├── index.html
├── vite.config.ts
└── package.json

七、开发规范建议

1. 命名：组件 PascalCase，文件 kebab-case
2. 接口：统一在 api/ 下封装，避免在组件内直接写 axios
3. 类型：为接口返回值定义 TypeScript 类型
4. 路由：使用路由守卫做登录校验
5. 环境变量：通过 .env / .env.dev 区分开发/生产 API 地址

八、常见问题

• 跨域：开发时 Vite 代理到后端，见 vite.config.ts 的 proxy
• 端口占用：start.ps1 / stop.ps1 会管理 9700/9800/9900 端口
• 依赖安装失败：可配置 NPM_REGISTRY 使用国内镜像

相关链接

• 后端开发指南
• API 文档
• 配置参考
• 项目仓库