第二周个人周报-191211黎命东

191211-黎命东 2025-03-17 08:45:26

一、本周计划任务与实际完成任务

任务类别	计划任务	实际完成内容	耗时（小时）
学习任务	完成Vue3路由、组件通信学习	完成Vue3路由（Vue Router）及组件通信（props/emits、provide/inject、Pinia状态管理）学习，并通过案例巩固	24
项目开发	搭建项目基础框架	完成项目模板搭建：集成ElementPlus、Pinia、路由配置、Layout布局，统一包管理器为pnpm	18
功能开发	实现登录功能	完成登录页开发（账号校验、路由跳转），Home页Layout布局及侧边栏动态路由配置	16
模块开发	开发日程日历模块	实现日历展示，切换年月日，展示节日节气、日程增删改功能（未完成根据时间自动排序日程）	12
工具配置	配置ESLint/Stylelint	完成ESLint、Stylelint、Prettier配置，解决新版工具链兼容性问题	24
问题排查与优化	解决开发环境问题	更新WebStorm至2024版，修复Vue3类型声明问题，优化项目目录结构	4

二、个人工作中存在的问题及应对措施

问题：ESLint/Stylelint配置困难
- 原因：新版工具链文档不完善，旧版配置方案失效。
- 措施：通过安装过程中的警告信息得到废弃依赖，再查阅CSDN和官网的英文文档替换为新包（如用@stylistic/eslint-plugin替代旧版样式插件），并且配置相应的语法
问题：WebStorm2023对Vue3支持不足
- 原因：旧版IDE对Vue3类型声明和TS语法支持滞后。
- 措施：
  - 在env.d.ts中手动补充*.vue模块声明，确保TS类型推导正常。(原方案，现弃用）
  - 升级WebStorm至2024版，利用内置Vue3支持解决类型报错；（最终方案）
问题：项目目录结构混乱
- 原因：社区规范多样，缺乏统一标准。
- 措施：参考尚硅谷企业级项目规范，采用分层结构：比如src/components存放可复用组件，src/layout存放主页面布局组件，src/views存放页面级组件，src/views/compoents存放页面级组件的子组件，页面级组件的入口组件统一命名为index.vue；

三、个人学习的新知识点及学习途径

知识点	学习内容	学习途径
Vue Router	动态路由匹配、导航守卫、路由懒加载	Vue3官方文档、B站“尚硅谷”Vue3视频
Pinia状态管理	Store定义、组合式API、持久化存储方案	Pinia中文文档、CSDN开发者经验、B站“尚硅谷”Vue3视频
ESLint/Stylelint配置	新版插件语法（如`@stylistic/eslint-plugin`）、自定义规则优先级	官方文档、CSDN开发者经验帖、B站最新Eslint/Stylelint基础教程
工程化规范	项目目录规范，代码规范，页面结构规范，命名规范，环境统一	B站尚硅谷Vue3实战课程

四、个人工作感悟

工程化思维的提升
- 通过配置代码规范工具，深刻认识到标准化开发流程对团队协作的重要性。例如，强制使用const/let替代已经废弃的var、统一字符串为单引号格式，不允许使用any类型等，从源头减少代码风格争议。
- 工具链的迭代速度远超预期，需保持持续学习：新版ESLint/Stylelint废弃了许多插件，新版与旧版差距较大，需主动关注生态变化。
问题解决能力的锻炼
- 面对WebStorm的Vue文件爆红问题，最初更改配置文件可以让ts识别vue，但是提出疑问，既然是vue3项目，为什么官方不内置vue的类型声明，而是需要用户手动配置？接着尝试了在VsCode中运行无报错，定位了根源为IDE。思考可能是IDE版本低，插件不兼容导致。最后下载最新的IDE，彻底解决了爆红的问题，不需要用户手动配置，并且获得了更强大的vue生态支持。
- 配置工具链时，先使用旧版方案，通过pnpm安装日志的警告信息获取废弃包提示，再根据提示信息去CSDN和官网寻找替代方案。这一经验可迁移至其他技术调研场景。
团队协作意识的深化
- 编写项目模板时，刻意设计低侵入性架构：小组成员仅需关注views目录下的业务模块开发，无需理解底层路由或状态管理逻辑，降低新人上手成本。
- 通过强制代码格式化（EsLint/StyleLint）和包管理器统一（pnpm），减少因环境差异导致的运行问题，体现“约定优于配置”的设计原则。
不足与改进方向
- 功能完善：
  - 日历日程按时间排序
  - 优化页面美观（如图标、配色）
- 团队协作：
  - 添加代码提交前自动检查（防止不规范代码上传）
  - 对接后端接口（当前登录和日程数据是假数据）
- 个人学习：
  - 学习状态管理工具（如Pinia模块化）
  - 掌握接口请求工具（如axios）