Vue 3 待办事项管理系统

基于 Vue 3 + Vite 构建的待办事项管理系统，使用 Element Plus 组件库。

项目技术栈

• Vue 3 + Vite
• Vue Router 4
• Pinia
• Axios
• Element Plus

功能特点

• 用户登录/登出
• 任务总览和统计
• 任务列表展示与搜索
• 任务详情查看与编辑
• 新增任务
• 分类管理

快速开始

安装依赖

1

npm install

开发环境运行

1

npm run dev

生产环境构建

1

npm run build

登录信息

使用以下信息登录系统：

• 用户名：admin
• 密码：123456

项目结构

1
2
3
4
5
6
7
8
9
10

src/
├── api/          # API 请求
├── assets/       # 静态资源
├── components/   # 公共组件
├── router/       # 路由配置
├── store/        # Pinia 状态管理
├── views/        # 页面组件
├── App.vue       # 根组件
├── main.js       # 入口文件
└── style.css     # 全局样式

页面说明

1. LoginPage.vue：登录页面
2. HomePage.vue：首页，展示任务总览和统计信息
3. TaskList.vue：任务列表页，展示所有任务并支持搜索
4. TaskDetail.vue：任务详情页，查看和编辑任务
5. AddTask.vue：添加任务页面
6. CategoryManager.vue：分类管理页面