# edu-vue-project

**Repository Path**: ahwei688/edu-vue-project

## Basic Information

- **Project Name**: edu-vue-project
- **Description**:  一个基于 Vue3.x+ vite + Vuex + Vue-router4.x + ElementUI-Plus + Typescript + Axios 构建的教育管理系统，用于管理学科、教师、视频等教育资源。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-06-21
- **Last Updated**: 2025-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Element-UI, TypeScript, Axios, Nginx

## README

# 教育管理系统 (Edu Admin System)

一个基于 Vue 3 + TypeScript + Vite 构建的教育管理系统，用于管理学科、教师、视频等教育资源。

## 项目简介

本项目是一个教育管理系统前端，提供了以下功能模块：
- 用户登录与权限管理
- 学科信息管理
- 教师信息管理
- 教学视频管理
- 用户个人中心

系统采用现代化的前端技术栈，具有良好的用户体验和响应式设计。

## 技术栈

- [Vue 3](https://v3.vuejs.org/) - 渐进式JavaScript框架
- [TypeScript](https://www.typescriptlang.org/) - JavaScript的超集，提供类型安全
- [Vite](https://vitejs.dev/) - 快速的构建工具
- [Element Plus](https://element-plus.org/) - Vue 3 UI组件库
- [Vue Router](https://router.vuejs.org/) - Vue.js官方路由管理器
- [Vuex](https://vuex.vuejs.org/) - Vue.js状态管理
- [Axios](https://axios-http.com/) - 基于Promise的HTTP客户端

## 项目结构

```
src/
├── api/              # API接口定义
├── assets/           # 静态资源文件
├── components/       # 公共组件
├── config/           # 配置文件
├── router/           # 路由配置
├── store/            # Vuex状态管理
├── utils/            # 工具函数
├── views/            # 页面视图
│   ├── admin/        # 管理后台页面
│   ├── layout/       # 布局组件
│   ├── login/        # 登录页面
│   └── user/         # 用户中心页面
├── App.vue           # 根组件
└── main.ts           # 入口文件
```

## 开发环境搭建

### 环境要求

- Node.js >= 14.x
- npm 或 yarn

### 安装依赖

```bash
npm install
```

或使用 yarn：

```bash
yarn install
```

### 启动开发服务器

```bash
npm run dev
```

默认访问地址：http://localhost:3000

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 推荐IDE设置

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## TypeScript支持

由于TypeScript无法处理`.vue`导入的类型信息，默认情况下它们被简化为通用的Vue组件类型。如果需要在`.vue`导入中获得实际的prop类型，可以按照以下步骤启用Volar的Take Over模式：

1. 在VS Code命令面板中运行`Extensions: Show Built-in Extensions`，找到`TypeScript and JavaScript Language Features`，右键选择`Disable (Workspace)`。
2. 通过命令面板运行`Developer: Reload Window`重新加载VS Code窗口。

了解更多关于Take Over模式的信息，请访问[Volar讨论区](https://github.com/johnsoncodehk/volar/discussions/471)。

## 浏览器兼容性

该项目使用了现代Web API，推荐在以下浏览器的最新版本中使用：
- Chrome
- Firefox
- Safari
- Edge

## 许可证

此项目仅供学习交流使用。

## 联系作者
[ahwei688@foxmail.com](ahwei688@foxmail.com)