201
社区成员




任务类别 | 计划任务 | 实际完成内容 | 耗时(小时) |
---|---|---|---|
学习任务 | 完成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)
总结:本周是从学习到实战的过渡阶段,既巩固了Vue3核心技能,也初次体验了工程化落地的复杂性。最大的收获是意识到:工具链的熟练度与架构设计能力,与技术实现同等重要。后续将会继续更新模版和实现功能,同时持续完善个人技术体系。