快速熟悉Vue项目

#一.快速梳理大型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 可以看到一段代码的历史改动情况
…