跟着AI学vue第四章
第四阶段：实战项目
1. 选择项目
- 选择适合自己水平的项目：这就好比你是一个厨师，要根据自己的厨艺水平选择一道菜来做。如果你刚学 Vue 3 不久，就像厨艺还不太精湛，那就从简单的“菜”开始，比如做个“待办事项列表”。它就像一道家常菜，步骤相对简单，容易上手。要是你已经对 Vue 3 有了一定的掌握，像厨艺比较熟练了，就可以挑战一下“电商系统”这样的“大餐”，虽然复杂，但能让你学到更多东西。
- 参考开源项目：想象开源项目是其他厨师分享的菜谱。你可以去 GitHub 这样的“菜谱库”找找，看看别人是怎么做类似项目的。比如你打算做一个博客系统，就搜搜别人开源的博客项目。看看他们怎么设计文章展示、用户评论这些功能的代码结构，就像参考菜谱里的食材准备、烹饪步骤，从中获取灵感，知道自己项目的“食材”该怎么准备，“步骤”该怎么安排。
以下是一些适合新手学习的 Vue3 实战项目：
待办事项列表
功能特点：主要包括添加待办事项、删除待办事项、标记事项完成状态、列表展示等功能。通过这个项目，新手可以熟悉 Vue3 的基础语法，如数据绑定、事件绑定、条件渲染和列表渲染等。
技术要点：涉及到v-model指令实现数据双向绑定，v-for指令进行列表渲染，以及使用methods定义事件处理函数等。
响应式导航栏
功能特点：能够根据屏幕大小自适应显示不同的布局，如在移动端显示为汉堡菜单，在桌面端显示为水平导航栏。可以帮助新手掌握 Vue3 中的响应式设计和组件化开发思想。
技术要点：需要运用 CSS 媒体查询结合 Vue3 的响应式原理，可能会用到@media规则以及通过computed属性根据屏幕宽度计算导航栏的显示状态。
图片画廊
功能特点：可以展示一组图片，支持图片放大缩小、切换图片、添加图片描述等功能。有助于新手学习 Vue3 的ref引用、自定义指令等知识，同时也能提升对 CSS 样式的运用能力。
技术要点：使用ref获取图片元素进行操作，可能会自定义指令实现图片的懒加载等功能，利用transition组件实现图片切换的过渡效果。
简单的表单验证
功能特点：包含常见的表单字段，如用户名、密码、邮箱等，并对用户输入进行合法性验证。新手可以借此深入理解 Vue3 的表单处理和数据校验机制。
技术要点：运用v-model绑定表单数据，通过watch监听数据变化进行实时验证，也可以使用第三方验证库如vee-validate来简化验证过程。
计数器应用
功能特点：具有基本的计数功能，如点击按钮实现数字的增加或减少，还可以设置计数的上限和下限等。这是学习 Vue3 响应式数据更新和组件交互的基础项目。
技术要点：通过data或setup函数中的ref定义响应式数据，使用methods中的方法来更新数据，实现按钮点击的计数逻辑。
音乐播放器
功能特点：可以播放音乐、暂停音乐、切换歌曲、显示播放列表等。能够让新手接触到 Vue3 与 HTML5 音频 API 的结合使用，以及组件之间的通信。
技术要点：利用 HTML5 的audio标签结合 Vue3 的数据绑定来控制音乐播放，通过组件通信实现播放列表和播放器之间的交互，如父子组件传值或使用mitt等事件总线库。
这些项目都有相对简单的业务逻辑和清晰的功能模块，很适合新手在学习 Vue3 的过程中进行实践，帮助快速掌握 Vue3 的核心知识和技能。
2. 项目开发
- 组件设计：把项目想象成一座房子，组件就是房子的各个部分，比如客厅、卧室、厨房。每个组件都有自己的功能。以“待办事项列表”为例，你可能需要一个“待办事项项”组件，专门用来展示每一条待办事项。
<template>
<li>
<input type="checkbox" v-model="isCompleted">
<span :class="{ completed: isCompleted }">{{ todoText }}</span>
<button @click="deleteTodo">删除</button>
</li>
</template>
<script setup>
import { ref } from 'vue';
// 通过props接收父组件传递过来的数据
const props = defineProps({
todoText: String,
isCompleted: Boolean,
deleteTodo: Function
});
</script>
<style scoped>
.completed {
text-decoration: line-through;
}
</style>
这个组件里，通过 props 接收父组件传来的待办事项文本、完成状态以及删除待办事项的函数。用 v-model 实现复选框和完成状态的双向绑定，还设置了样式，当事项完成时给文本加上删除线。
- 路由规划：如果项目有多个页面，就像房子有不同的楼层，路由就像是楼梯，带你从一个页面到另一个页面。还是以博客系统为例，你可能有首页展示文章列表，详情页展示单篇文章。
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from './views/HomeView.vue';
import PostView from './views/PostView.vue';
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/post/:id',
name: 'post',
component: PostView
}
]
});
export default router;
这里定义了两个路由，根路径 / 对应首页 HomeView，/post/:id 路径对应文章详情页 PostView，:id 是动态参数，用来表示不同文章的编号。
- 状态管理：假设你在做电商系统，购物车的数据就像一个重要的“库存”，需要状态管理来统一维护。用 Pinia 来管理购物车状态，在
store文件夹下创建cart.js。
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({
items: [],
totalPrice: 0
}),
actions: {
addToCart(item) {
this.items.push(item);
this.calculateTotalPrice();
},
calculateTotalPrice() {
this.totalPrice = this.items.reduce((acc, item) => acc + item.price * item.quantity, 0);
}
}
});
在组件里使用购物车状态：
<template>
<div>
<button @click="addToCart({ name: '商品1', price: 10, quantity: 1 })">添加到购物车</button>
<p>购物车总价: {{ cartStore.totalPrice }}</p>
</div>
</template>
<script setup>
import { useCartStore } from '../store/cart.js';
const cartStore = useCartStore();
const addToCart = cartStore.addToCart;
</script>
这样在组件里就能方便地添加商品到购物车，并显示购物车总价。
3. 项目优化
- 性能优化：这就像给你的房子做装修升级，让它更舒适。比如图片优化，你可以用工具压缩图片大小，就像把大物件变小，这样网页加载图片就更快。代码分割也是一种优化，比如电商系统中，用户可能很少用到“售后服务”页面的代码，那就把这部分代码分割出来，只有用户访问时才加载，就像把不常用的东西放在仓库，要用时再拿，提高初始页面加载速度。
- 代码审查：想象你是房子的质检员，要检查房子的质量。你要看看代码逻辑是否清晰，有没有重复的代码，就像检查房子有没有多余的柱子或者不合理的结构。比如在待办事项列表项目里，检查删除待办事项的逻辑是否正确，有没有遗漏情况。要是发现问题，就像发现房子有瑕疵，及时修改，让项目更完美。通过不断优化和审查，你的项目就能像装修精美的房子一样，既实用又美观。
如何选择适合自己水平的 Vue3 实战项目？
可以从以下几个方面考虑：
评估自身基础
HTML/CSS/JavaScript 基础：如果对 HTML 标签、CSS 样式布局和 JavaScript 基本语法（如变量、函数、对象、数组等）掌握得比较扎实，那么可以尝试一些稍微复杂点的 Vue3 项目。如果基础还比较薄弱，就先从简单的入门级项目开始，重点巩固前端基础与 Vue3 的基本结合使用。
Vue3 知识储备：了解 Vue3 的基本概念，如组件、指令、响应式原理等，可选择涉及更多组件交互和状态管理的项目。若只是刚接触 Vue3，对其核心概念还不太熟悉，建议先从实现基本页面展示和简单交互的项目入手，如简单的静态页面转换为 Vue3 组件形式的项目。
明确学习目标
学习特定技术点：若想深入学习 Vue3 的路由系统，可选择具有多页面路由切换功能的项目，如单页应用（SPA）类型的项目。若想掌握状态管理，那么像购物车项目，它涉及到商品数量、选中状态等多种状态的管理，会是不错的选择。
提升综合能力：想要全面提升开发能力，包括与后端交互、部署上线等，可以选择一个完整的前后端分离的项目，如博客系统，需要实现文章的发布、展示、评论等功能，还可能涉及用户登录注册等功能。
参考项目难度和规模
难度分级：一般来说，项目可分为入门级、中级和高级。入门级项目如简单的待办事项列表、计数器等，主要涉及 Vue3 的基础语法和简单交互。中级项目如图片画廊、响应式导航栏等，会涉及到组件化、响应式设计等更多知识。高级项目如音乐播放器、电商平台等，包含复杂的业务逻辑、状态管理和性能优化等内容。
项目规模：小型项目通常功能单一，代码量较少，几天内可以完成，适合快速上手和熟悉流程。中型项目有一定的功能模块和业务逻辑，可能需要一到两周时间完成，能提升综合开发能力。大型项目功能复杂、模块众多，需要团队协作完成，适合有一定经验后深入学习和实践。
查看项目文档和资源
文档完整性：好的项目会有详细的文档，包括项目介绍、技术栈、安装步骤、使用说明等。文档齐全有助于新手理解项目结构和开发流程，即使遇到问题也能更好地查找解决方案。
学习资源：是否有配套的教程、视频讲解、代码注释等学习资源。例如，在一些技术博客或开源项目平台上，有些项目作者会提供详细的教程，一步一步教你如何实现项目功能，这类项目就很适合学习。
考虑兴趣和实际需求
个人兴趣：对某个领域有兴趣，如游戏、美食、旅游等，可以选择相关领域的 Vue3 项目，如旅游攻略网站、美食推荐平台等。兴趣会让你更有动力去学习和完成项目。
实际需求：如果是为了找工作或提升工作技能，可以选择与工作场景相关的项目，如企业管理系统中的员工信息管理模块、数据统计报表模块等。