入職乙個月快速熟悉大型Vue專案經驗感想

2022-06-17 08:18:14 字數 2045 閱讀 4356

來到和睦的公司家庭已經乙個月出頭了,從技術層面來說,公司專案pc端是我目前來說接觸的最大最複雜的專案了,德老師也說這個不斷開發更新迭代的專案的**量相對於全國的web來說是蠻多的,對於快速熟悉這樣的大專案需要一定的時間。我是真的深有體會了,因為自己剛開始開發vue的實戰經驗很少,剛開始做公司這個專案所花的時間中,三分之二是在讀**,而且還有很多沒看懂的。但隨著接觸的模組不斷增加,不斷在**中踩坑脫坑,不斷地在和pc端大管加朝夕相處的日子裡漸漸的摸清它的架構,其中積累了一些快速讀懂專案架構、模組元件內部邏輯的經驗和感悟。這是對於我來說的乙份寶貴的實戰經驗,值得記錄一下。

首先對於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的方法

快捷鍵的使用: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裡可以清晰地看到提交的分支情況等等...)

待探索中...

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

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

加油,永遠年輕,永遠熱淚盈眶!

入職乙個月體驗

來到好未來乙個月了,感覺學到了很多,想把一些感受和零散的知識點寫一寫.vue.js 來到公司,知道公司專案用的vue,自己就在網上查資料先研究研究。第一感覺是和angular類似,雖然angular接觸也不多。自己看並沒有多大感覺,只是感覺 風格大大不同。上手專案之後才感受到他的另類。資料繫結上,v...

生活向 入職乙個月總結

1.本人於2019.7.26在長春達內中心畢業,現在就職於某網際網路企業做二次開發,對於達內其實有很多的感想,在達內學習了五個月 說長不長,彈指一瞬,說短不短,日夜煎熬,我之前的專業是電氣工程,都說轉行累轉行苦,轉行窮三年,但是我還是義無反顧的投入到了網際網路的這個行業,因為之前的工作在廠子裡,在3...

入職乙個月 告別學生時代

乙個月前,又回來原來的崗位開始工作了。雖然之前在這裡實習了大半年,但是現在的身份已經不同。不能再是那個只抱著學習的心態去做事情的實習生了。乙個月來,還得慢慢去適應作為乙個正式員工。近來有些困惑,剛好導師找我聊了一會,大部分困惑解開,但是還是需要自己去調節,去適應。希望自己接下來能夠多注意下面幾點 結...