← Back to Recording

Summary

Overview

本课程系统讲解了 Vue 3 项目开发的核心概念与工程实践，涵盖组件化设计、双向数据绑定、事件抛出（emits）、插槽（slot）机制、项目初始化、目录结构解析、状态管理（Pinia）、路由配置（Vue Router）、UI 组件库（Element Plus）集成、代码构建与部署、以及实际项目（任务看板系统）的完整开发流程。课程通过理论讲解与实操演示相结合，帮助学员掌握现代前端开发的工程化方法，为后续开发微信小程序等跨平台应用打下坚实基础。

Topic (Timeline)

1. 组件化设计与数据通信机制 [00:00:00 - 00:06:48]

  • 介绍组件化开发的必要性：适用于多人协作、大体量项目，通过 .vue 文件实现模块复用。
  • 以“生产计划表单”为例，说明组件可被多个页面引用，避免代码重复。
  • 解释 props：父组件向子组件传递数据（如年度、季度），子组件通过定义属性接收并动态渲染。
  • 解释 emits：子组件通过事件向上层通信（如“打印”事件），携带参数（年度、季度）供父组件调用其他组件（如打印模块）执行操作。

2. 插槽（Slot）机制与练习总结 [00:06:48 - 00:09:23]

  • 通过 child-component 示例讲解插槽：子组件提供 <slot> 占位符，父组件可传入任意内容替换。
  • 区分默认内容（fallback）与动态传入内容：未传入时显示默认文本，传入后替换为指定内容（如消息、列表）。
  • 总结上午练习成果：学员已掌握 Vue 组件结构、数据传递与事件通信的基本模式。

3. Vue 3 项目初始化与 CLI 工具使用 [00:09:23 - 00:15:50]

  • 演示使用 npm install -g @vue/cli 安装全局 Vue CLI 工具（包管理器 npm 已预装）。
  • 使用 vue create test 创建项目，选择 Vue 3 版本与 npm 作为包管理器。
  • 项目创建成功后，指导学员进入项目目录（cd test）并启动开发服务器（npm run serve）。
  • 浏览器访问 http://localhost:8080 验证项目运行成功。

4. Vue 3 项目目录结构详解 [00:15:50 - 00:24:50]

  • node_modules：存放所有 npm 安装的依赖包。
  • public：存放静态资源（如 index.html、图标），打包时原样复制。
  • src：核心开发目录，包含：
    • assets：项目内引用的静态资源（图片、CSS），打包时被压缩并内联。
    • components：存放可复用的 .vue 组件。
    • views：存放页面级组件（如登录页、主页），对应路由路径。
    • router：存放路由配置文件，定义 URL 与组件映射。
    • stores：存放 Pinia 状态管理模块。
    • App.vue：项目根组件，包含模板、脚本、样式。
    • main.js/main.ts：项目入口文件，调用 createApp() 挂载到 #app DOM 节点。
  • gitignore：配置 Git 忽略文件（如 node_modules）。
  • package.json：项目元数据与依赖声明，npm install 依据此文件安装依赖。
  • vite.config.ts：Vite 打包配置文件，替代 Webpack，简化构建流程。

5. 项目构建、安全与代码质量保障 [00:24:50 - 00:41:32]

  • 构建流程：npm run build 生成 dist/ 目录，所有资源被压缩打包为单文件，提升加载速度。
  • 部署安全：仅部署 dist/，不暴露源码（src/），防止代码泄露。
  • ESLint：集成 Vue 3 官方代码规范，检测代码风格（如分号、未使用变量），提升代码质量。
  • 演示 ESLint 报错修复：删除多余分号、使用声明变量，使检查通过。

6. 实际项目分析：任务看板系统架构 [00:46:25 - 01:23:14]

  • 项目结构：基于 Vue 3 + TypeScript + Pinia + Vue Router + Element Plus。
  • 路由配置：
    • 使用动态路由（:id）匹配任务详情页（如 /task/123）。
    • 使用 meta: { requiresAuth: true } 实现路由守卫，未登录用户跳转至登录页。
    • 使用 history 模式，支持浏览器前进/后退。
  • 状态管理（Pinia）：
    • 创建 user 和 task 仓库，集中管理全局状态（当前用户、任务列表）。
    • 组件通过 import { useUserStore } 获取状态，无需层层传递。
    • 实现登录、登出、任务增删改查等操作均通过仓库方法完成。
  • 路由守卫：在 beforeEach 中校验 requiresAuth，未认证则重定向至 /login。

7. 看板页面实现：数据绑定、分页与组件库使用 [01:23:14 - 01:58:41]

  • 数据流：
    • taskStore 提供原始任务列表。
    • computed 属性 filteredTasks 根据筛选状态（pending/progress/done）过滤数据。
    • paginatedTasks 基于 filteredTasks 和分页设置（每页数量、当前页）计算分页结果。
  • UI 组件（Element Plus）：
    • 使用 el-select 实现状态筛选，双向绑定 filterStatus。
    • 使用 el-table 展示任务列表，支持自定义列（如状态下拉、优先级颜色标签）。
    • 使用 el-button、el-tag 等组件实现统一美观的交互样式。
  • 事件处理：
    • 点击行触发 handleRowClick，跳转至任务详情页（router.push({ name: 'task', params: { id } })）。
    • 点击编辑/删除按钮触发对应仓库方法（updateTask、deleteTask）。

8. 表单组件设计：Props 与 Emits 模式 [01:58:41 - 02:18:18]

  • 组件复用：TaskForm 组件被“新建任务”和“编辑任务”两个页面共享。
  • Props：父组件通过 :task="editingTask" 传入任务数据，子组件接收并初始化表单。
  • Emits：子组件通过 emit('submit') 和 emit('cancel') 向父组件通知操作。
    • 提交时：父组件调用 addTask 或 updateTask 更新仓库。
    • 取消时：父组件设置 addDialog = false 隐藏弹窗。
  • Watch：监听 task 变化，自动同步到表单数据 formData，实现双向绑定。

9. 任务详情页与路由参数使用 [02:18:18 - 02:23:14]

  • 通过 router.params.id 获取动态路由参数，转换为整数后用于查找 taskStore 中对应任务。
  • 无需再次请求服务器，直接从全局状态中读取任务详情。
  • 使用 el-card 展示任务信息，支持返回（router.back()）和编辑操作。

10. Element Plus 组件库集成与实战 [02:23:16 - 03:02:49]

  • 为何使用 Element Plus：
    • 提供 60+ 高质量 UI 组件（按钮、对话框、表格、分页、图标等），提升开发效率。
    • 保证跨平台（Web、微信小程序、支付宝小程序等）UI 一致性。
  • 安装与引入：
    • 使用 npm install element-plus 安装。
    • 在 main.ts 中导入并使用 app.use(ElementPlus)。
  • 实战任务：
    • 在 App.vue 中添加一个按钮，点击弹出 el-message 或 el-dialog 显示 “Hello World”。
    • 演示如何从官方文档复制代码片段直接使用。
  • 扩展建议：课后练习使用 Element Plus 实现更多组件（如评分、省市区联动）。

11. 项目总结与后续学习建议 [03:02:47 - 03:02:49]

  • 总结：课程覆盖 Vue 3 核心机制（组件、状态、路由）、工程化流程（CLI、构建、ESLint）、UI 库集成与实战项目。
  • 建议：复习 D2 实际项目结构，重点理解 Pinia 状态管理与 Vue Router 配置；观看课程录像巩固知识。

Appendix

Key Principles

  • 组件化：每个 .vue 文件是一个独立组件，可复用、可组合。
  • 单向数据流 + 事件通信：props 向下传递，emits 向上通知。
  • 全局状态管理：使用 Pinia 避免深层组件间数据传递。
  • 路由驱动视图：URL 与组件绑定，实现 SPA（单页应用）。
  • UI 组件库：使用 Element Plus 提升开发效率与用户体验一致性。
  • 构建即部署：npm run build 生成生产环境代码，仅部署 dist/ 目录。

Tools Used

  • Vue CLI / Vite：项目脚手架与构建工具。
  • npm：包管理器。
  • Pinia：Vue 3 官方状态管理库。
  • Vue Router：前端路由管理。
  • Element Plus：Vue 3 UI 组件库。
  • ESLint：代码质量与风格检查。
  • VS Code：开发编辑器。
  • Git：版本控制（提及但未深入）。

Common Pitfalls

  • 混淆 public/ 与 assets/：public 资源直接访问，assets 资源需通过路径引用且会被打包。
  • 忘记在 main.ts 中引入并使用 Element Plus，导致组件样式失效。
  • 路由守卫未正确处理 next()，导致页面卡死。
  • 使用 computed 时未正确依赖响应式数据，导致不更新。
  • 在 props 中直接修改传入数据，违反单向数据流原则。

Practice Suggestions

  1. 在 test 项目中集成 Element Plus，实现一个带表单、表格和分页的简单任务列表。
  2. 为任务看板项目添加“审核员”列（参考课程任务），练习修改数据源与组件渲染。
  3. 使用 watch 监听表单输入，实时校验并显示错误提示。
  4. 尝试将任务看板项目打包部署到本地 HTTP 服务器（如 Nginx）。
  5. 阅读 Element Plus 官方文档，尝试使用 el-dialog、el-select、el-table 实现一个独立的小功能模块。