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

　　来到和气的公司家庭已经一个月出头了，从技术层面来讲，公司项目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. 待探索中...

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

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

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