# vue3-study

**Repository Path**: zeno-study/vue3-study

## Basic Information

- **Project Name**: vue3-study
- **Description**: vue3 框架学习示例代码
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-03
- **Last Updated**: 2026-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 学习项目

这是一个基于 Vue3、Vite 和 Element Plus 构建的现代化前端项目框架。

## 技术栈

- **Vue 3.4+** - 渐进式 JavaScript 框架
- **Vite 5+** - 下一代前端构建工具
- **Element Plus 2.5+** - Vue 3 组件库
- **Pinia 2+** - Vue 3 状态管理库
- **Vue Router 4+** - Vue 3 官方路由
- **Sass** - CSS 预处理器
- **ESLint** - 代码规范检查

## 项目特性

- ✅ 支持开发、测试、生产多环境配置
- ✅ 自动导入 Element Plus 组件和图标
- ✅ 支持 TypeScript（可选）
- ✅ 代码分割和懒加载优化
- ✅ 响应式布局支持
- ✅ 代理配置支持
- ✅ 环境变量管理

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建

```bash
# 构建测试环境
npm run build:test

# 构建生产环境
npm run build:prod
```

### 预览构建结果

```bash
npm run preview
```

### 代码检查

```bash
npm run lint
```

### 单元测试

```bash
npm run test:unit
```

## 项目目录结构

```
vue3-study/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 接口
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia 状态管理
│   ├── styles/            # 全局样式
│   ├── types/             # TypeScript 类型定义
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── .env.development       # 开发环境变量
├── .env.test             # 测试环境变量
├── .env.production       # 生产环境变量
├── .eslintrc.cjs         # ESLint 配置
├── index.html            # HTML 模板
├── package.json          # 项目依赖
├── vite.config.js        # Vite 配置
└── vitest.config.js      # Vitest 配置
```

## 环境变量

项目支持三种环境配置：

- **开发环境** (`.env.development`) - 本地开发使用
- **测试环境** (`.env.test`) - 测试服务器使用
- **生产环境** (`.env.production`) - 生产服务器使用

## 代码示例

### 使用 Element Plus 组件

```vue
<template>
  <el-button type="primary">按钮</el-button>
  <el-input v-model="text" placeholder="输入内容" />
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>
```

### 使用 Pinia 状态管理

```vue
<script setup>
import { useUserStore } from '@/stores'

const userStore = useUserStore()
console.log(userStore.username)
</script>
```

### 使用路由

```vue
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

router.push('/about')
</script>
```

## 开发规范

- 使用 ESLint 进行代码规范检查
- 组件命名使用 PascalCase
- 文件命名使用 camelCase
- 使用组合式 API (Composition API)

## 许可证

MIT