# f2e-app-vue3

**Repository Path**: f2e-server/f2e-app-vue3

## Basic Information

- **Project Name**: f2e-app-vue3
- **Description**: f2e-server3  编译vue3 的样例
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-05
- **Last Updated**: 2025-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Ant Design Vue 应用

这是一个使用 Vue3 和 Ant Design Vue 构建的现代化前端应用示例。

## 功能特性

- 🏠 **首页**: 展示应用概览和欢迎信息
- ✅ **TODO管理**: 完整的待办事项管理功能
- 🎨 **现代化UI**: 基于Ant Design Vue的美观界面设计
- 🚀 **Vue3 + Router**: 使用最新的Vue3 Composition API和Vue Router 4

## 技术栈

- Vue 3.5.18
- Vue Router 4
- Ant Design Vue 4.2.6
- Less CSS预处理器

## 项目结构

```
src/
├── components/          # 组件目录
│   ├── HelloWorld.vue  # 首页组件
│   └── Navigation.vue  # 导航菜单组件
├── views/               # 页面组件目录
│   └── TodoPage.vue    # TODO功能页面
├── router/              # 路由配置
│   └── index.js        # 路由定义
├── App.vue             # 根组件
└── main.js             # 应用入口
```

## 路由配置

- `/` - 首页 (HelloWorld组件)
- `/todo` - TODO管理页面

## 开发命令

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 使用Bun构建
npm run build:bun
```

## 主要功能

### 首页
- 欢迎信息和应用介绍
- 功能特性展示
- 交互演示（计数器、日期选择器）

### TODO管理
- 添加新的待办事项
- 标记任务完成状态
- 删除任务
- 任务统计信息

### 导航菜单
- 响应式顶部导航
- 当前页面高亮显示
- 图标和文字组合

## 开发说明

1. 应用使用Vue3 Composition API
2. 路由配置使用Vue Router 4的History模式
3. UI组件库使用Ant Design Vue 4.x版本
4. 支持中文语言包
5. 使用Less作为CSS预处理器

## 浏览器支持

支持所有现代浏览器，包括：
- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88