今日总结 2024-12-23

项目初始化

• 拉取代码与环境配置：
  • 难点：Git 命令不熟悉，依赖文件定位不准，启动脚本含义不明。
  • 解决办法：系统学习 Git 基础操作，如通过官方文档、优质的 Git 教程视频，反复练习克隆、分支切换等常用指令；使用编辑器的文件搜索功能，精准定位如 package.json、package-lock.json 这类依赖文件来升级 core-js；参考项目文档或者开源项目社区里的说明，解读启动脚本用途，也可以在终端里逐行运行脚本，观察项目反应辅助理解。
• 插件确认：
  • 难点：不清楚插件配置规则与微调方法。
  • 解决办法：查阅 ESLint 和 Vue - Official 插件的官方文档，了解基础配置参数的意义；参考开源项目里相似插件的配置案例，模仿并在本地测试效果；遇到问题时，去对应的插件 GitHub 仓库 Issues 板块搜索有无相似疑问及解决方案。

项目架构认知

• 目录与入口：
  • 难点：陌生项目架构导致迷失方向，难定位关键文件。
  • 解决办法：查看项目根目录下是否有 README.md 这类说明文档，一般会介绍项目架构；从入口文件出发，如 main.js，顺着代码里的 import 语句反向追踪，梳理目录功能；尝试给关键目录添加简单注释，标注其大致用途，方便后续查找。
• 组件解析：
  • 难点：理解 Vue 特有语法协同运作，以及样式模块化管理。
  • 解决办法：深入学习 Vue 官方教程，做一些简单的 Vue 组件拆分、组合小练习，加深对组件嵌套、数据绑定等语法的熟悉度；研究 Vue 单文件组件的样式 scoped 标签原理，学习如何利用 CSS 预处理器（如 scss、less）模块化管理样式，通过实践小型 Vue 项目掌握技巧。
• 配置文件：
  • 难点：掌握配置参数作用，理解权限控制复杂逻辑。
  • 解决办法：对于 settings.js，每项配置参数修改后，观察页面变化，记录效果辅助理解；拆解 permission.js 里的路由守卫代码，画出流程图，梳理不同路由场景下的权限判断走向，结合实际页面访问测试，加深理解。
• Vuex 结构：
  • 难点：把握模块拆分粒度，组织各部分交互流程。
  • 解决办法：先从简单的 Vuex 示例项目学起，模仿拆分模块思路；绘制 Vuex 模块交互的思维导图，梳理数据从组件触发 action，经过 mutations 修改状态，再通过 getters 被获取的完整流程；在实践项目里不断尝试调整模块拆分，总结经验。

资源使用与管理

• 图标使用与原理：
  • 难点：理解底层知识，如动态引入与打包原理。
  • 解决办法：查找 webpack 官方文档里关于 require.context 的介绍及示例，学习资源动态引入；阅读 svg-sprite-loader 的 README 文件，了解其工作流程，同时参考开源项目里的实际使用案例，跟着一步步搭建小 demo 实践。
• 样式资源管理：
  • 难点：熟悉 Git 工作流，避免配置远程仓库出错。
  • 解决办法：学习 Git 工作流相关的教程，模拟完整的项目开发流程，包含创建、删除仓库，推送拉取代码等操作；复制远程仓库链接时，多核对几遍，配置好后先尝试推送一个测试分支，确认无误。

登录页开发

• 表单校验：
  • 难点：融合 Vue 响应式原理与正则表达式，把控校验触发时机。
  • 解决办法：复习 Vue 数据响应式原理基础知识点，做一些简单的数据绑定小实验；利用正则表达式测试工具，先在线测试手机号、密码等正则表达式准确性，再整合进 Vue 项目；参考优秀的 Vue 表单校验开源项目，学习校验触发时机的设置技巧。

登录流程剖析

• 流程整合：
  • 难点：理清多环节串联的异步操作与状态流转。
  • 解决办法：用流程图工具画出整个登录流程，标注异步操作和状态变化节点；给关键代码添加日志输出，观察数据在各环节的流转情况；拆解流程，先单独实现并测试每个小环节，再整合起来调试。

Vuex 用户模块构建

• 模块重写：
  • 难点：遵循模块结构规范，避免命名冲突与数据流向混乱。
  • 解决办法：仔细研读 Vuex 官方规范文档，按照规范一步步重构用户模块；模块命名采用统一前缀或遵循既定命名规则，添加详细注释标注数据流向；测试时，通过 Vue Devtools 监控 Vuex 状态变化，及时发现问题。

跨域问题及代理解决

• 跨域成因与代理原理：
  • 难点：抽象的同源策略与复杂代理通信关系难理解。
  • 解决办法：阅读浏览器同源策略相关的技术文章，结合简单的前后端分离小项目，手动制造跨域场景观察现象；绘制代理服务通信关系图，从前端请求出发，描绘经过代理到后端的线路，辅助理解原理。
• 实操配置：
  • 难点：精准修改配置选项，避免误改关键配置。
  • 解决办法：备份 vue.config.js 文件，每次修改前对比备份，确认修改位置；修改完先运行项目，出现问题及时回滚配置，根据报错信息针对性排查。

axios 封装

• 拦截器设置：
  • 难点：掌握拦截器生命周期，正确处理数据与异常。
  • 解决办法：查阅 axios 官方文档关于拦截器的介绍，牢记生命周期各阶段功能；在拦截器里添加详细的日志输出，观察数据处理和异常捕获情况；参考成熟的 axios 封装开源项目，学习异常处理的优秀实践。

环境区分

• 变量理解：
  • 难点：区分不同环境变量取值差异与用途。
  • 解决办法：在 .env.development 和 .env.production 等文件里，给变量添加详细注释，标注用途和取值范围；在代码里使用变量的地方，打印输出观察不同环境下实际取值，加深印象。

登录联调

• 多模块协同：
  • 难点：保障多模块数据传递、接口调用、页面跳转无误。
  • 解决办法：先对每个模块单独单元测试，确保功能正常；添加跨模块的数据追踪日志，记录数据在不同模块间流转情况；利用浏览器调试工具，观察接口调用、页面跳转过程，出现问题按日志和调试信息排查。

主页权限验证（鉴权）

• 守卫逻辑：
  • 难点：复杂嵌套判断，避免权限漏洞。
  • 解决办法：将守卫逻辑拆分成小函数，每个函数负责单一判断任务，提升代码可读性；编写测试用例，覆盖各种权限场景，如有无 token 、访问不同页面类型，用测试驱动开发，确保逻辑严密。

用户资料处理

• 获取与管理：
  • 难点：协调路由跳转、Vuex 状态更新时机，梳理资料流程。
  • 解决办法：利用 Vue Router 的导航钩子生命周期函数，在合适节点触发 Vuex 状态更新；绘制用户资料获取与更新的流程图，标注路由相关节点，按图梳理代码逻辑；添加状态监控日志，观察资料状态是否及时更新。

显示用户信息

• 属性引用与样式：
  • 难点：确保数据绑定准确，适配不同屏幕样式。
  • 解决办法：使用 Vue 官方提供的调试工具，检查数据绑定是否正确；采用响应式 CSS 框架（如 Bootstrap、Tailwind CSS），利用框架提供的类名轻松适配不同屏幕，再按需微调样式。

头像为空处理

• 语法升级：
  • 难点：确认升级无版本冲突。
  • 解决办法：升级前备份 package.json 和 package-lock.json 文件，升级后运行项目，若出现错误，对比备份文件，回滚相关依赖版本，逐次排查问题。

token 失效应对

• 拦截与登出逻辑：
  • 难点：适时触发登出 action，避免误判。
  • 解决办法：在请求拦截器添加详细判断逻辑注释，辅助理解何时触发；模拟不同的 token 状态场景，如过期、即将过期等，全面测试登出逻辑，确保用户体验不受影响。

退出登录功能

• 事件修饰符运用：
  • 难点：理解修饰符改变事件绑定行为原理。
  • 解决办法：查阅 Vue 官方文档里关于事件修饰符的介绍，结合简单示例项目，动手实践，对比添加修饰符前后的事件触发效果，加深理解。

修改密码功能

• 流程完整性：
  • 难点：保证多环节代码不出错。
  • 解决办法：为每个环节代码添加注释，标注功能和数据流向；按环节顺序逐步测试，先确保单个环节没问题，再串联起来整体调试；出现问题时，根据注释和调试信息定位。

项目清理与创建

• 文件筛选与集成：
  • 难点：准确判断文件去留，避免路由冲突。
  • 解决办法：查看现有路由和请求模块的使用情况，梳理调用关系，没有调用的大概率可删除；集成新路由和组件时，先在测试环境添加，运行测试，观察有无冲突报错，再正式集成。

左侧菜单解析

• 数据关联与渲染：
  • 难点：理清多层嵌套与数据交互流程。
  • 解决办法：绘制组件树状图，标注数据传递方向；在关键组件代码里添加注释，说明接收和传递的数据内容；通过浏览器调试工具，观察菜单渲染过程中的数据变化，辅助理解。

左侧菜单显示 logo

• 状态响应与样式切换：
  • 难点：实现流畅动画效果，融合 Vue 响应式编程与 CSS 动画。
  • 解决办法：学习 Vue 过渡动画相关的 API，结合 CSS 动画属性，先做简单的动画效果小实验；在 Logo.vue 里，利用 Vue 响应式数据驱动动画状态，通过调试工具观察动画触发和状态切换，不断优化。