# vue3-learn

**Repository Path**: iuv007/vue3-learn

## Basic Information

- **Project Name**: vue3-learn
- **Description**: 这是一个完整的 Vue 3 教学课程,学习使用 Vue 3 + TypeScript + Tailwind CSS + Vite 进行现代前端开发。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-15
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 学习课程

这是一个完整的 Vue 3 教学课程,学习使用 Vue 3 + TypeScript + Tailwind CSS + Vite 进行现代前端开发。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - JavaScript 的超集,提供静态类型
- **Tailwind CSS** - 实用优先的 CSS 框架
- **Vite** - 下一代前端构建工具
- **pnpm** - 快速、节省磁盘空间的包管理器

## 快速开始

### 环境要求

- Node.js >= 18
- pnpm >= 8

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

访问 http://localhost:5173

### 构建生产版本

```bash
pnpm build
```

## 课程大纲

### 第 1 课: Vue 3 基础
- [x] 环境搭建
- [ ] 模板语法
- [ ] 数据绑定
- [ ] 条件渲染
- [ ] 列表渲染
- [ ] 事件处理

### 第 2 课: 响应式系统
- [ ] ref 和 reactive
- [ ] 计算属性
- [ ] 侦听器
- [ ] 响应式最佳实践

### 第 3 课: 组件开发
- [ ] 组件基础
- [ ] Props 传递
- [ ] 自定义事件
- [ ] 插槽 Slots

### 第 4 课: Composition API
- [ ] setup 函数
- [ ] 响应式 API
- [ ] 组合式函数
- [ ] 生命周期钩子

### 第 5 课: 路由与状态管理
- [ ] Vue Router
- [ ] Pinia 状态管理
- [ ] 路由守卫
- [ ] 数据持久化

## 项目结构

```
vue3-learn/
├── lessons/          # 课程目录
├── examples/         # 示例代码
├── exercises/        # 练习题
├── src/             # 源代码
└── docs/            # 文档
```

## 学习资源

- [Vue 3 官方文档](https://cn.vuejs.org/)
- [Vite 官方文档](https://cn.vitejs.dev/)
- [Tailwind CSS 文档](https://tailwindcss.com/)
- [TypeScript 中文文档](https://www.tslang.cn/)