入职一个月快速熟悉大型Vue项目经验感想

标签：全局   配置文件   代码编辑   json   搜索   color   pmu   可视化   配置   

　　来到和睦的公司家庭已经一个月出头了，从技术层面来说，公司项目PC端是我目前来说接触的最大最复杂的项目了，德老师也说这个不断开发更新迭代的项目的代码量相对于全国的web来说是蛮多的，对于快速熟悉这样的大项目需要一定的时间。我是真的深有体会了，因为自己刚开始开发vue的实战经验很少，刚开始做公司这个项目所花的时间中，三分之二是在读代码，而且还有很多没看懂的。但随着接触的模块不断增加，不断在代码中踩坑脱坑，不断地在和PC端大管加朝夕相处的日子里渐渐的摸清它的架构，其中积累了一些快速读懂项目架构、模块组件内部逻辑的经验和感悟。这是对于我来说的一份宝贵的实战经验，值得记录一下。

一.快速梳理大型vue项目整体架构技巧方法总结

1. 首先对于Vue Cli搭建的项目，一定要知道项目的目录结构，如果目录结构都不了解，那一定会很头痛
2. 查看 package.json 配置文件，了解项目引用了哪些额外插件和框架
3. 查看 router 文件，可以快速梳理项目脉络（非常重要！）
4. 查看 vuex 文件（如果项目使用了 vuex，那vuex在其中一定扮演着非常重要的角色 ，时不时一些数据就是从vuex中取得的），通过这点可以大概明白整体项目的数据流向；除此之外通过vue devtool查看vuex也是个方法
5. 一定要看的main.js入口文件，其中vue.use()和import 引入的文件都对梳理项目架构很重要
6. 扫一眼一般src目录下的components组件

二.快速熟悉内部组件模块技巧方法总结

作为一个谦卑的初级程序员，刚开始到公司接触大型项目做的工作通常是改改历史遗留问题的bug，写写模块或者组件内部的一些小逻辑以尽快熟悉项目整体架构。有时候一些简单的小问题放到大型项目中，汪洋般的代码量让你无从下手，就算通过开发工具快速找到了目标代码，也不能很快熟悉里面的逻辑到底是怎么一回事儿。经过一段时间的折磨，笔者积累一些自己的方法和技巧。

1. 找到该组件的name，从routers里面看该组件是否有对应的路由，这一步判断组件在全局架构中的位置
2. 先看import的引入，判断模块内引用了哪些组件和方法，从components中看到引入了哪些子组件。也可以借助vue devtool工具看组件的使用情况
3. 快速扫一遍html结构，结合浏览器的审查元素查找目标改动位置
4. 比起漫步目的的找代码，不如先看一下data（）和methods（），这里面的代码注释和规范命名很重要，一定要起语义化、命名规范的名字，对自己好也对他人好
5. 在数据这一块，要优先看一下生命周期钩子，created()，beforeMount()等，了解这一模块的数据是在哪个时期获取的，是在组件初始化的时候还是中途发送请求获取的？等等
6. 数据这一块还要尤其注意一下有没有从vuex中拿数据（如果项目使用了vuex的话），尤其注意...mapState  ...mapAction  ...mapMutations的使用
7. 注意组件内部有没有使用mixins混入，这里面定义了一些通用的公共方法或者计算属性等等
8. 组件内部嵌套了组件，就要多注意一下props和父组件监听的子组件$emit的方法

三.提升工作效率 代码编辑工具WebStorm的使用 

1. 快捷键的使用：
   1. Ctrl + F非常重要！！！在茫茫代码海中找到你真的不容易，Ctrl + F在手一定会找到你，F3 和 shift + F3明明白白上下切换找你。如果你真的一行一行找大量代码，估计要么错过要么找到目标的时候已经忘了自己要找它干嘛了
   2. Ctrl + 鼠标左键 点击函数名快速跳转到函数声明
   3. 双击shift 或者 Ctrl +  shift + F 在整个目录中全局搜索目标代码；ctrl+shift+N 通过文件名快速查找工程内的文件
   4. Ctrl + F 选中目标代码+ Ctrl + R 快速替换
   5. 选中函数定义，Alt + 上下 快速跳转函数名
   6. Ctrl + shift + 回车上面的删除键Back  快速回到上次编辑的位置
   7. 选中一段代码，右键选择 local history 可以看到一段代码的历史改动情况
   8. ......
2. webstorm 菜单栏上的 VCS  以及对 Git 非常友好的可视化界面 (终端控制处的Version Control里可以清晰地看到提交的分支情况等等...)
3. 待探索中...

这些总结可能还不太成熟，但随着时间的积累，对如何快速熟悉大型项目会积累更多的经验，学会更多的技巧。

很想再提醒一下自己，方法很重要，看代码敲代码都要掌握好方法。

加油，永远年轻，永远热泪盈眶！

入职一个月快速熟悉大型Vue项目经验感想

标签：全局   配置文件   代码编辑   json   搜索   color   pmu   可视化   配置   

原文地址：https://www.cnblogs.com/lwj-blog/p/11700398.html