第一周：JavaScript 进阶与 Vue3 核心入门

第 1 天：JavaScript ES6 + 核心特性

• 学习资源：https://es6.ruanyifeng.com/ ｜ B站搜索相关资源
• 上午：学习箭头函数、解构赋值（数组解构、对象解构）、模板字符串，用这些特性重构已掌握的 JavaScript 代码（如成绩统计功能），简化语法并体会 ES6 + 的便捷性；初步了解 Promise 基础（解决异步回调嵌套问题），理解异步编程的核心场景（如模拟接口请求）。
• 下午：深入学习 async/await 语法，编写简单异步代码（如延迟 2 秒返回模拟用户数据）；综合运用 Promise 和 async/await，实现 “先获取用户信息（模拟延迟 1 秒），再根据用户 ID 获取订单列表（模拟延迟 1 秒）” 的异步流程，确保流程顺序执行，巩固异步编程逻辑。

第 2 天：Vue3 基础环境搭建与核心概念

• 学习资源：https://cn.vuejs.org/guide/introduction
• 上午：安装 Node.js 和 pnpm（若未安装），使用 Vue CLI 创建 Vue3 项目，熟悉项目目录结构（src/components、src/views、src/main.ts、src/App.vue 等核心目录 / 文件的作用）；学习 Vue3 模板语法（插值 {{}}、指令 v-bind、v-if、v-for、v-on），在 App.vue 中实现简单交互（点击按钮切换文本显示状态、用 v-for 循环渲染预设商品列表）。
• 下午：创建第一个 Vue3 组件（TodoList 组件），实现 “新增待办”（输入框 + 按钮）和 “删除待办” 功能，用 v-for 渲染待办列表，v-on 绑定删除点击事件；测试组件功能，确保新增、删除逻辑正常运行，熟悉 Vue3 组件的基本开发流程。

第 3 天：Vue3 组合式 API 基础

• 上午：学习 setup 语法糖、响应式数据（ref、reactive），将 TodoList 组件改造成组合式 API 写法，重点理解 ref（用于基本类型响应式）与 reactive（用于对象 / 数组响应式）的区别；学习计算属性（computed），在 TodoList 中用 computed 统计 “已完成待办数量”，体会计算属性的缓存特性。
• 下午：学习侦听器（watch、watchEffect），用 watch 监听待办列表变化并弹出提示（如 “待办列表已更新”）；优化 TodoList 组件，添加 “待办筛选” 功能（全部 / 已完成 / 未完成），用 computed 根据筛选条件动态过滤待办列表，实现切换筛选条件时列表实时更新。

第 4 天：Vue3 组件通信与实践

• 上午：学习 Vue3 组件通信核心方式（父传子 props、子传父 emit、全局事件总线 mitt 库），拆分 TodoList 为多组件（父组件 TodoContainer、子组件 TodoInput - 负责输入新增、TodoList - 负责列表渲染、TodoFilter - 负责筛选）；明确各组件职责，梳理组件间数据传递逻辑。
• 下午：实现组件间数据传递（父组件通过 props 向子组件传值、子组件通过 emit 向父组件传事件），测试通信是否正常；整合所有组件，完成完整 TodoList 应用（支持新增、删除、筛选、数量统计），排查功能 bug（如筛选后删除待办是否正常、新增待办是否触发列表更新）。

第 5 天：TypeScript 基础入门

• 学习资源：https://juejin.cn/book/7288482920602271802/section/7288666667121868837 ｜ B站搜索相关资源
• 上午：了解 TypeScript 核心价值（静态类型检查、提升代码可维护性、IDE 智能提示），学习 TS 基础类型（number、string、boolean、array 两种写法、interface 接口），在单独 TS 文件中练习类型定义（如定义 User 接口包含 id、name、age 属性）；熟悉 TS 类型声明的基本语法。
• 下午：学习 TS 在函数中的应用（参数类型标注、返回值类型标注、可选参数、默认参数），编写带类型约束的函数（如 add 函数限制参数为 number 类型）；为已掌握的 JavaScript 代码（成绩统计、TodoList 的 JS 逻辑）添加 TS 类型注解，解决类型报错，理解 “类型明确” 的重要性。

第 6 天：TypeScript 在 Vue3 中的应用

• 上午：学习 Vue3 组件中 TS 的集成（props 类型定义用 defineProps + 泛型、emit 类型声明用 defineEmits + 类型字面量、ref/reactive 类型标注）；定义待办项接口 TodoItem（包含 id、content、isDone 属性），为 TodoList 组件的响应式数据（todoList、filterType）添加类型约束。
• 下午：将 TodoList 组件改造为 TS 版本，为 props、emit 添加明确类型约束，消除 TS 类型警告；学习 TS 泛型基础和常用高级类型（Partial、Readonly），用泛型写一个可排序的工具函数（支持 number/string 数组排序），理解泛型的代码复用价值。

第 7 天：NaiveUI 环境搭建与基础使用

• 学习资源：https://www.naiveui.com/zh-CN/light/docs/introduction
• 上午：在 Vue3+TS 项目中集成 NaiveUI（通过 npm 安装 naive-ui 和 @vicons/ionicons5），了解两种引入方式（全局引入适合小项目、按需引入减少打包体积），配置按需引入（借助 unplugin-vue-components 插件）；完成 NaiveUI 的基础环境配置，确保组件可正常使用。
• 下午：学习 NaiveUI 基础组件使用（按钮 NButton、输入框 NInput、卡片 NCard、布局组件 NLayout），用这些组件替换 TodoList 中的原生元素；使用 NConfigProvider 组件修改项目主色调（如改为蓝色）、调整组件尺寸，优化 TodoList 页面样式，贴合现代 UI 设计。

第二周：NaiveUI 实战与项目整合优化

第 8 天：NaiveUI 常用组件实战（上）

• 上午：学习 NaiveUI 列表组件（NList、NListItem）和复选框组件（NCheckbox），用 NList+NListItem 重构待办列表渲染；实现 “标记待办完成 / 未完成” 功能（勾选复选框时更新待办 isDone 状态），确保组件交互与数据同步。
• 下午：学习 NaiveUI 下拉选择器（NSelect）和统计数字组件（NCountUp），将 TodoFilter 的筛选切换改为 NSelect 下拉选择（选项为 “全部”“已完成”“未完成”）；用 NCountUp 动态展示已完成待办数量（实现数字递增动画），调试组件样式适配（调整间距、优化小屏幕响应式布局）。

第 9 天：NaiveUI 常用组件实战（下）

• 上午：学习 NaiveUI 对话框（NDialog）和提示组件（NMessage、NNotification），在 “删除待办” 时弹出 NDialog 确认弹窗（提示 “确定要删除该待办吗？”）；实现点击确认后删除并通过 NMessage 弹出 “删除成功” 提示，取消则不执行删除逻辑。
• 下午：学习 NaiveUI 表单组件（NForm、NFormItem、NInput），重构 “新增待办” 功能为表单形式，添加输入验证（待办内容不能为空，为空时显示错误提示）；用 NForm 的 validate 方法触发验证，优化交互体验（验证不通过时禁止提交、待办标记完成添加轻微动画）。

第 10 天：Vue3 路由基础与项目整合

• 上午：学习 Vue Router 安装与基础配置（安装 vue-router@4，创建路由配置文件 src/router/index.ts），定义路由规则（首页 Home、待办页 Todo、关于页 About）；在 main.ts 中挂载路由实例，用 NaiveUI 的导航组件（NMenu）实现页面导航栏，支持声明式跳转（router-link）。
• 下午：学习编程式跳转（useRouter 钩子的 push/replace 方法），在 Todo 页中添加 “待办详情” 动态路由（/todo/:id），实现点击待办项跳转到详情页并展示内容；用嵌套路由实现 “Todo 页 + 详情页” 层级关系，添加 NBreadcrumb（面包屑）展示当前页面路径。

第 11 天：项目状态管理基础

• 上午：学习 Pinia 基础（Vue3 官方推荐状态管理库），安装 pinia 并创建 Store 实例（如 todoStore），定义 state（待办列表）、actions（新增、删除、筛选待办的方法）；在组件中通过 useStore 使用 Store，理解 Pinia 的状态管理逻辑。
• 下午：将 TodoList 的全局状态（待办列表）迁移到 Pinia Store，实现 “路由跳转后待办列表不丢失”（如从 Todo 页跳转到 Home 页再返回，列表保持原样）；优化 Store 逻辑（在 actions 中添加 TS 类型约束、处理异步逻辑模拟接口获取待办列表），确保状态管理与 TS 适配。

第 12 天：项目性能优化

• 上午：学习 Vue3 性能优化核心手段（路由懒加载通过 import () 动态导入组件、组件懒加载用 defineAsyncComponent）；配置路由懒加载，查看打包体积变化，减少首屏加载时间；学习 keep-alive 缓存组件，用 keep-alive 包裹路由视图缓存常用页面（如 Todo 页）。
• 下午：通过 include/exclude 属性控制 keep-alive 缓存的组件，测试缓存效果（如返回 Todo 页时筛选状态保留）；优化 NaiveUI 使用体验（关闭不需要的组件默认动画、确保按需引入未使用组件不打包）；用浏览器 DevTools 的 Performance 面板分析页面加载性能，找出可优化点。

第 13 天：项目功能完善与兼容性测试

• 上午：完善项目细节功能，添加页面加载状态（用 NLoadingBar 展示接口请求加载中）、处理错误边界（用 onErrorCaptured 捕获组件错误避免页面崩溃）；添加空状态提示（待办列表为空时显示 “暂无待办，点击新增吧～”），提升用户体验。
• 下午：进行浏览器兼容性测试（在 Chrome、Firefox、Edge 等主流浏览器中测试新增、删除、路由跳转功能）；修复兼容性问题（如 CSS 样式兼容、ES6 + 语法兼容借助 babel-polyfill）；用媒体查询（@media）优化移动端适配（如导航栏在手机端折叠为汉堡菜单），测试移动端交互。

第 14 天：项目总结与后续学习规划

• 上午：梳理两周学习成果，回顾 Vue3 核心（组合式 API、组件通信）、TypeScript 集成（类型定义、组件中 TS 使用）、NaiveUI 实战（常用组件、主题配置）、项目优化（路由懒加载、Pinia 状态管理）；整理学习笔记和易错点（如 ref 与 reactive 的区别、TS 泛型用法）。
• 下午：部署项目（可选，将 TodoList 部署到 Netlify、Vercel 等平台，通过 GitHub 仓库关联生成在线链接）；规划后续深入学习方向（Vue3 高级 API Teleport/Suspense、Pinia 高级用法模块化 / 持久化、NaiveUI 复杂组件 NDataTable/NTree、前端工程化 webpack/ESLint），制定下一阶段学习计划。