Vue3 开源项目实战教程：50天50个小项目

欢迎来到Vue3练手项目教程，这是一个基于Vue3、TypeScript以及Vite构建的完整学习项目，旨在通过50个小项目帮助前端开发者系统性地提升Vue3开发技能。

项目概述

50projects-vue3是一个精心设计的Vue3学习项目集合，每个项目都聚焦于不同的前端开发技能点，从基础的UI交互到复杂的动画效果，涵盖了现代前端开发的各个方面。

技术栈

• Vue 3: 最新版本的Vue.js框架，提供更好的性能和开发体验
• TypeScript: 提供类型安全的JavaScript开发
• Vite: 快速的构建工具，提供极速的开发服务器启动和热更新
• Vue Router: 官方的路由管理库
• Axios: 用于HTTP请求
• Sass: CSS预处理器
• ESLint: 代码质量检查工具
• Husky: Git钩子工具，确保代码质量

项目结构

该Vue3项目采用了清晰且组织良好的目录结构：

.
├── public/                    # 静态资源文件夹
├── src/                       # 核心源代码文件夹
│   ├── api/                   # API接口文件
│   ├── assets/                # 静态资源
│   │   └── imgs/              # 图片资源
│   ├── mock/                  # 模拟数据
│   ├── router/                # 路由配置
│   ├── styles/                # 样式文件
│   └── views/                 # 页面组件
│       ├── Day01_ExpandingCards/     # 第1天：展开卡片
│       ├── Day02_ProgressSteps/      # 第2天：进度条
│       ├── Day04_HiddenSearchWidget/ # 第4天：隐藏搜索框
│       └── ...                # 更多项目
├── package.json               # 项目依赖配置
├── vite.config.js            # Vite构建配置
├── tsconfig.json             # TypeScript配置
└── eslint.config.js          # ESLint配置

项目特色

每个小项目都设计精巧，涵盖不同的前端技术点：

• Day01: Expanding Cards - 展开卡片效果，学习Vue3的状态管理和过渡动画
• Day02: Progress Steps - 进度条组件，掌握步骤指示器的实现
• Day04: Hidden Search Widget - 隐藏式搜索框，体验交互动画设计
• Day05: Blurry Loading - 模糊加载效果，学习图片处理技巧
• Day07: Split Landing Page - 分割式登录页，掌握布局技巧

快速开始

要开始使用这个项目，首先克隆仓库：

git clone https://gitcode.com/gh_mirrors/50/50projects-vue3
cd 50projects-vue3

安装依赖：

npm install

启动开发服务器：

npm run dev

构建生产版本：

npm run build

开发配置

项目的Vite配置位于vite.config.js，提供了完整的构建配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
      dirs: ['./src/api/**'],
    }),
  ],
  server: {
    open: true,
    hmr: true,
    host: '0.0.0.0',
    port: '5173',
  }
})

学习路径

建议按照天数顺序逐个完成项目，每个项目都建立在前面项目的基础上：

1. 基础阶段 (Day01-10): 掌握基础UI组件和交互动画
2. 进阶阶段 (Day11-30): 学习复杂交互和数据处理
3. 高级阶段 (Day31-50): 实现完整应用和游戏开发

代码规范

项目配置了完整的代码质量工具：

• ESLint: 确保代码风格一致性
• Commitlint: 规范Git提交信息
• Husky: 在提交前自动检查代码质量

总结

50projects-vue3是一个完美的Vue3学习资源，通过实际项目实践帮助开发者：

1. 掌握Vue3的核心概念和API
2. 学习TypeScript在Vue项目中的应用
3. 熟悉现代前端开发工具链
4. 提升UI/UX设计和交互动画实现能力
5. 培养良好的代码编写习惯

每个项目都配有详细的实现代码和样式文件，是学习Vue3和前端开发的宝贵资源。