来到和睦的公司家庭已经一个月出头了，从技术层面来说，公司项目PC端是我目前来说接触的最大最复杂的项目了，德老师也说这个不断开发更新迭代的项目的代码量相对于全国的web来说是蛮多的，对于快速熟悉这样的大项目需要一定的时间。我是真的深有体会了，因为自己刚开始开发vue的实战经验很少，刚开始做公司这个项目所花的时间中，三分之二是在读代码，而且还有很多没看懂的。但随着接触的模块不断增加，不断在代码中踩坑脱坑，不断地在和PC端大管加朝夕相处的日子里渐渐的摸清它的架构，其中积累了一些快速读懂项目架构、模块组件内部逻辑的经验和感悟。这是对于我来说的一份宝贵的实战经验，值得记录一下。
一.快速梳理大型vue项目整体架构技巧方法总结
- 首先对于Vue Cli搭建的项目，一定要知道项目的目录结构，如果目录结构都不了解，那一定会很头痛
- 查看 package.json 配置文件，了解项目引用了哪些额外插件和框架
- 查看 router 文件，可以快速梳理项目脉络（非常重要！）
- 查看 vuex 文件（如果项目使用了 vuex，那vuex在其中一定扮演着非常重要的角色 ，时不时一些数据就是从vuex中取得的），通过这点可以大概明白整体项目的数据流向；除此之外通过vue devtool查看vuex也是个方法
- 一定要看的main.js入口文件，其中vue.use()和import 引入的文件都对梳理项目架构很重要
- 扫一眼一般src目录下的components组件
二.快速熟悉内部组件模块技巧方法总结
作为一个谦卑的初级程序员，刚开始到公司接触大型项目做的工作通常是改改历史遗留问题的bug，写写模块或者组件内部的一些小逻辑以尽快熟悉项目整体架构。有时候一些简单的小问题放到大型项目中，汪洋般的代码量让你无从下手，就算通过开发工具快速找到了目标代码，也不能很快熟悉里面的逻辑到底是怎么一回事儿。经过一段时间的折磨，笔者积累一些自己的方法和技巧。
- 找到该组件的name，从routers里面看该组件是否有对应的路由，这一步判断组件在全局架构中的位置
- 先看import的引入，判断模块内引用了哪些组件和方法，从components中看到引入了哪些子组件。也可以借助vue devtool工具看组件的使用情况
- 快速扫一遍html结构，结合浏览器的审查元素查找目标改动位置
- 比起漫步目的的找代码，不如先看一下data（）和methods（），这里面的代码注释和规范命名很重要，一定要起语义化、命名规范的名字，对自己好也对他人好
- 在数据这一块，要优先看一下生命周期钩子，created()，beforeMount()等，了解这一模块的数据是在哪个时期获取的，是在组件初始化的时候还是中途发送请求获取的？等等
- 数据这一块还要尤其注意一下有没有从vuex中拿数据（如果项目使用了vuex的话），尤其注意...mapState ...mapAction ...mapMutations的使用
- 注意组件内部有没有使用mixins混入，这里面定义了一些通用的公共方法或者计算属性等等
- 组件内部嵌套了组件，就要多注意一下props和父组件监听的子组件$emit的方法
三.提升工作效率 代码编辑工具WebStorm的使用
- 快捷键的使用：
- Ctrl + F非常重要！！！在茫茫代码海中找到你真的不容易，Ctrl + F在手一定会找到你，F3 和 shift + F3明明白白上下切换找你。如果你真的一行一行找大量代码，估计要么错过要么找到目标的时候已经忘了自己要找它干嘛了
- Ctrl + 鼠标左键 点击函数名快速跳转到函数声明
- 双击shift 或者 Ctrl + shift + F 在整个目录中全局搜索目标代码；ctrl+shift+N 通过文件名快速查找工程内的文件
- Ctrl + F 选中目标代码+ Ctrl + R 快速替换
- 选中函数定义，Alt + 上下 快速跳转函数名
- Ctrl + shift + 回车上面的删除键Back 快速回到上次编辑的位置
- 选中一段代码，右键选择 local history 可以看到一段代码的历史改动情况
- ......
- webstorm 菜单栏上的 VCS 以及对 Git 非常友好的可视化界面 (终端控制处的Version Control里可以清晰地看到提交的分支情况等等...)
- 待探索中...
这些总结可能还不太成熟，但随着时间的积累，对如何快速熟悉大型项目会积累更多的经验，学会更多的技巧。
很想再提醒一下自己，方法很重要，看代码敲代码都要掌握好方法。
加油，永远年轻，永远热泪盈眶！
原文地址：https://www.cnblogs.com/lwj-blog/p/11700398.html
时间： 2024-08-27 17:02:29