# vue 学习项目

**Repository Path**: design_project/vue---learning-project

## Basic Information

- **Project Name**: vue 学习项目
- **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-01-24
- **Last Updated**: 2025-01-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 学习项目

这是一个用于学习 Vue 3 的项目仓库。

## 学习笔记目录

- [简介](./notes/00-introduction.md) - Vue 3 基础概念和主要特性
- [环境搭建](./notes/01-setup.md) - 开发环境配置和项目创建
- [第一个应用](./notes/02-first-app.md) - 创建第一个 Vue 应用
- [模板语法](./notes/03-template-syntax.md) - Vue 3 模板语法详解
- [响应式基础](./notes/04-reactivity.md) - Vue 3 响应式系统
- [计算属性](./notes/05-computed.md) - Vue 3 计算属性
- [侦听器](./notes/06-watch.md) - Vue 3 侦听器
- [生命周期](./notes/07-lifecycle.md) - Vue 3 生命周期钩子
- [组件](./notes/08-components.md) - Vue 3 组件系统
- [表单处理](./notes/09-forms.md) - Vue 3 表单处理
- [路由](./notes/10-router.md) - Vue Router 路由系统
- [状态管理](./notes/11-pinia.md) - Pinia 状态管理
- [依赖注入](./notes/12-injection.md) - Vue 3 依赖注入
- [组合式函数](./notes/13-composables.md) - Vue 3 组合式函数
- [过渡和动画](./notes/14-transitions.md) - Vue 3 过渡和动画
- [性能优化](./notes/15-performance.md) - Vue 3 性能优化
- [部署](./notes/16-deployment.md) - Vue 3 项目部署
- [项目规范](./notes/vue3-cursor-rules.md) - Vue 3 项目开发规范

## 项目结构

```
.
├── notes/          # 学习笔记
│   ├── 00-introduction.md    # Vue 3 简介
│   ├── 01-setup.md          # 环境搭建
│   ├── 02-first-app.md      # 第一个应用
│   ├── 03-template-syntax.md # 模板语法
│   ├── 04-reactivity.md     # 响应式基础
│   ├── 05-computed.md       # 计算属性
│   ├── 06-watch.md          # 侦听器
│   ├── 07-lifecycle.md      # 生命周期
│   ├── 08-components.md     # 组件
│   ├── 09-forms.md          # 表单
│   ├── 10-router.md         # 路由
│   ├── 11-pinia.md          # 状态管理
│   ├── 12-injection.md      # 依赖注入
│   ├── 13-composables.md    # 组合式函数
│   ├── 14-transitions.md    # 过渡和动画
│   ├── 15-performance.md    # 性能优化
│   ├── 16-deployment.md     # 项目部署
│   └── vue3-cursor-rules.md   # 项目规范
└── src/            # 源代码
    ├── router/     # 路由配置
    │   └── index.ts
    ├── stores/     # 状态管理
    │   ├── user.ts
    │   └── cart.ts
    ├── composables/ # 组合式函数
    │   ├── useCounter.ts
    │   ├── useFetch.ts
    │   └── useLocalStorage.ts
    ├── components/ # 组件
    │   ├── UserCard.vue
    │   ├── Counter.vue
    │   ├── ThemeSwitch.vue
    │   ├── HeavyComponent.vue
    │   └── VirtualList.vue
    └── views/      # 页面组件
        ├── HomeView.vue
        ├── AboutView.vue
        ├── ReactivityView.vue
        ├── TemplateSyntaxView.vue
        ├── ComputedView.vue
        ├── WatchView.vue
        ├── WatchEffectView.vue
        ├── LifecycleView.vue
        ├── ComponentsView.vue
        ├── FormView.vue
        ├── RouterDemoView.vue
        ├── PiniaView.vue
        ├── InjectionView.vue
        ├── ComposablesView.vue
        ├── TransitionView.vue
        └── PerformanceView.vue
```

## 学习进度

- [x] Vue 3 简介和基础概念
- [x] 开发环境搭建
- [x] 创建第一个应用
- [x] 模板语法
- [x] 响应式基础
- [x] 计算属性
- [x] 侦听器
- [x] 生命周期钩子
- [x] 组件系统
- [x] 表单处理
- [x] 路由系统
- [x] 状态管理
- [x] 依赖注入
- [x] 组合式函数
- [x] 过渡和动画
- [x] 性能优化
- [x] 项目部署
- [x] 项目规范