入職一個月快速熟悉大型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. 待探索中...

這些總結可能還不太成熟，但隨着時間的積累，對如何快速熟悉大型項目會積累更多的經驗，學會更多的技巧。

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

加油，永遠年輕，永遠熱淚盈眶！