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

[191211-黎命东]

 

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

任务类别	计划任务	实际完成内容	耗时（小时）
学习任务	完成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

---

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

1. 问题：ESLint/Stylelint配置困难

   • 原因：新版工具链文档不完善，旧版配置方案失效。

   • 措施：通过安装过程中的警告信息得到废弃依赖，再查阅CSDN和官网的英文文档替换为新包（如用@stylistic/eslint-plugin替代旧版样式插件），并且配置相应的语法

2. 问题：WebStorm2023对Vue3支持不足

   • 原因：旧版IDE对Vue3类型声明和TS语法支持滞后。

   • 措施：

     • 在env.d.ts中手动补充*.vue模块声明，确保TS类型推导正常。(原方案，现弃用）

     • 升级WebStorm至2024版，利用内置Vue3支持解决类型报错；（最终方案）

3. 问题：项目目录结构混乱

   • 原因：社区规范多样，缺乏统一标准。

   • 措施：参考尚硅谷企业级项目规范，采用分层结构：比如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实战课程

---

四、个人工作感悟 

1. 工程化思维的提升

   • 通过配置代码规范工具，深刻认识到标准化开发流程对团队协作的重要性。例如，强制使用const/let替代已经废弃的var、统一字符串为单引号格式，不允许使用any类型等，从源头减少代码风格争议。

   • 工具链的迭代速度远超预期，需保持持续学习：新版ESLint/Stylelint废弃了许多插件，新版与旧版差距较大，需主动关注生态变化。

2. 问题解决能力的锻炼

   • 面对WebStorm的Vue文件爆红问题，最初更改配置文件可以让ts识别vue，但是提出疑问，既然是vue3项目，为什么官方不内置vue的类型声明，而是需要用户手动配置？接着尝试了在VsCode中运行无报错，定位了根源为IDE。思考可能是IDE版本低，插件不兼容导致。最后下载最新的IDE，彻底解决了爆红的问题，不需要用户手动配置，并且获得了更强大的vue生态支持。

   • 配置工具链时，先使用旧版方案，通过pnpm安装日志的警告信息获取废弃包提示，再根据提示信息去CSDN和官网寻找替代方案。这一经验可迁移至其他技术调研场景。

3. 团队协作意识的深化

   • 编写项目模板时，刻意设计低侵入性架构：小组成员仅需关注views目录下的业务模块开发，无需理解底层路由或状态管理逻辑，降低新人上手成本。

   • 通过强制代码格式化（EsLint/StyleLint）和包管理器统一（pnpm），减少因环境差异导致的运行问题，体现“约定优于配置”的设计原则。

4. 不足与改进方向

   • 功能完善：

     • 日历日程按时间排序

     • 优化页面美观（如图标、配色）

   • 团队协作：

     • 添加代码提交前自动检查（防止不规范代码上传）

     • 对接后端接口（当前登录和日程数据是假数据）

   • 个人学习：

     • 学习状态管理工具（如Pinia模块化）

     • 掌握接口请求工具（如axios）

---

总结：本周是从学习到实战的过渡阶段，既巩固了Vue3核心技能，也初次体验了工程化落地的复杂性。最大的收获是意识到：工具链的熟练度与架构设计能力，与技术实现同等重要。后续将会继续更新模版和实现功能，同时持续完善个人技术体系。