# vue3-project

**Repository Path**: cursor-demo/vue3-project

## Basic Information

- **Project Name**: vue3-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-21
- **Last Updated**: 2025-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 项目工程化示例

基于 Vue 3 + TypeScript + Vite + Element Plus 的现代化前端项目示例，集成了完整的工程化配置和最佳实践。

## 项目特点

- 📦 基于 Vite 5 构建，更快的冷启动和热更新
- 🎯 TypeScript 类型安全系统，完整的类型推导
- 🧩 Vue 3 Composition API 开发模式
- 🛠️ 完善的工程化环境配置，支持多环境构建
- 💉 自动化依赖注入，更轻松的组合式API使用
- 🧪 Mock 数据支持，可随时切换真实/模拟数据
- 🎨 Element Plus UI 组件库集成
- 🔍 ESLint + Prettier 代码质量保障

## 快速开始

### 环境要求

- Node.js 16.0 或更高版本
- npm 7.0 或更高版本

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

### 构建项目

```bash
# 构建生产环境
npm run build

# 构建不同环境
npm run build:prod    # 生产环境
npm run build:staging # 测试环境
```

### 代码检查

```bash
# 类型检查
npm run type-check

# 代码风格检查
npm run lint
```

## 项目结构

```
├── docs/              # 项目文档
├── public/            # 静态资源
├── src/
│   ├── api/           # API请求封装
│   ├── assets/        # 静态资源文件
│   ├── components/    # 全局公共组件
│   ├── composables/   # 组合式函数
│   ├── config/        # 全局配置
│   ├── router/        # 路由配置
│   ├── stores/        # 状态管理
│   ├── types/         # 类型定义
│   ├── views/         # 页面组件
│   ├── App.vue        # 根组件
│   └── main.ts        # 入口文件
├── .env               # 所有环境共享的环境变量
├── .env.development   # 开发环境变量
├── .env.production    # 生产环境变量
├── .env.staging       # 测试环境变量
├── vite.config.ts     # Vite 配置
└── tsconfig.json      # TypeScript 配置
```

## 环境变量配置

项目使用 Vite 环境变量系统实现多环境配置：

- `.env`：所有环境共享的基础配置
- `.env.development`：开发环境特定配置
- `.env.production`：生产环境特定配置
- `.env.staging`：测试环境特定配置

详细配置说明请参考 [环境配置说明文档](./docs/环境配置说明.md)。

## Mock 数据

项目支持通过环境变量配置是否启用 Mock 数据，使开发可以脱离后端依赖：

```typescript
// src/api/someApi.ts
import { dataSourceConfig } from '@/config'

export const getData = async () => {
  if (dataSourceConfig.useMockData) {
    // 返回 Mock 数据
    return mockData
  } else {
    // 调用真实 API
    return await fetch(...)
  }
}
```

## 编码规范

项目遵循以下编码规范：

- 使用 Vue 3 Composition API 和 `<script setup>` 语法
- 组件使用 PascalCase 命名（如 `UserProfile.vue`）
- 组合式函数使用 camelCase 命名并以 `use` 前缀（如 `usePagination`）
- 严格的类型声明，避免使用 `any` 类型
- 使用 ESLint 和 Prettier 进行代码格式化

## 贡献指南

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交修改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 创建 Pull Request

## 许可证

ISC