# vite-press-vue3docs

**Repository Path**: cqlx/vite-press-vue3docs

## Basic Information

- **Project Name**: vite-press-vue3docs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-03
- **Last Updated**: 2025-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 学习教程

这是一个使用 VitePress 构建的 Vue3、Vue Router、Pinia 完整学习教程，包含详细的理论知识和实战示例。

## 📚 教程内容

### Vue3 基础
- [介绍](./docs/vue3/) - Vue3 核心概念和特性
- [组合式 API](./docs/vue3/composition-api.md) - 组合式 API 详解
- [响应式系统](./docs/vue3/reactivity.md) - 响应式原理和源码解析
- [生命周期](./docs/vue3/lifecycle.md) - 生命周期钩子
- [模板语法](./docs/vue3/template-syntax.md) - 模板语法详解
- [组件基础](./docs/vue3/components.md) - 组件开发
- [Props 和 Emits](./docs/vue3/props-emits.md) - 组件通信
- [插槽](./docs/vue3/slots.md) - 插槽使用
- [依赖注入](./docs/vue3/provide-inject.md) - 依赖注入
- [异步组件](./docs/vue3/async-components.md) - 异步组件
- [自定义指令](./docs/vue3/directives.md) - 异步组件
- [Fragment](./docs/vue3/fragment.md) - Fragment 片段
- [Suspense](./docs/vue3/suspense.md) - Suspense 组件
- [Teleport](./docs/vue3/teleport.md) - Teleport 组件
- [高级响应式 API](./docs/vue3/advanced-reactivity.md) - 高级响应式 API
- [组合式 API 高级特性](./docs/vue3/composition-advanced.md) - 组合式 API 高级特性

### Vue Router
- [介绍](./docs/vue-router/) - Vue Router 4 基础
- [基础路由](./docs/vue-router/basic.md) - 路由配置
- [动态路由](./docs/vue-router/dynamic.md) - 动态路由匹配
- [嵌套路由](./docs/vue-router/nested.md) - 嵌套路由
- [路由守卫](./docs/vue-router/guards.md) - 导航守卫
- [路由元信息](./docs/vue-router/meta.md) - 路由元信息
- [编程式导航](./docs/vue-router/programmatic.md) - 编程式导航

### Pinia
- [介绍](./docs/pinia/) - Pinia 状态管理
- [Store 基础](./docs/pinia/store.md) - Store 创建和使用
- [State](./docs/pinia/state.md) - 状态管理
- [Getters](./docs/pinia/getters.md) - 计算属性
- [Actions](./docs/pinia/actions.md) - 操作方法
- [组合式 Store](./docs/pinia/composition.md) - 组合式 Store
- [插件](./docs/pinia/plugins.md) - Pinia 插件

### 实战示例
- [Todo 应用](./docs/examples/todo.md) - 完整的 Todo 应用
- [购物车](./docs/examples/cart.md) - 购物车功能
- [用户管理](./docs/examples/user-management.md) - 用户管理系统

## 🚀 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run serve
```

## 📁 项目结构

```
docs/
├── .vitepress/
│   └── config.ts          # VitePress 配置
├── vue3/                  # Vue3 教程
├── vue-router/            # Vue Router 教程
├── pinia/                 # Pinia 教程
├── examples/              # 实战示例
└── index.md               # 首页
```

## 🎯 学习目标

通过本教程，你将掌握：

1. **Vue3 核心概念**：组合式 API、响应式系统、生命周期
2. **Vue Router 4**：路由配置、导航守卫、动态路由
3. **Pinia 状态管理**：Store 创建、状态管理、异步操作
4. **实战开发**：完整的项目开发流程和最佳实践

## 🔧 技术栈

- **VitePress** - 静态站点生成器
- **Vue 3** - 渐进式 JavaScript 框架
- **Vue Router 4** - 官方路由管理器
- **Pinia** - 状态管理库
- **TypeScript** - 类型安全的 JavaScript

## 📖 学习建议

1. **循序渐进**：按照教程顺序学习，从基础概念开始
2. **动手实践**：每个知识点都配有代码示例，建议动手实践
3. **项目实战**：通过完整的项目示例巩固所学知识
4. **源码解析**：深入理解原理，掌握核心概念

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个教程！

## 📄 许可证

MIT License

---

开始你的 Vue3 学习之旅吧！🚀