最近公司來了不少實(shí)習(xí)生和經(jīng)驗(yàn)不是特別豐富的前端開發(fā)人員，帶著他們做項(xiàng)目的時(shí)候，發(fā)現(xiàn)有很多入行0-3年的前端者欠缺一些東西。
那么，這里我這邊就以一個(gè) vue 項(xiàng)目為例給大家分享一下 vue 項(xiàng)目的一些技巧。
其實(shí)有很多人的項(xiàng)目可能都是直接 vue-cli 那一套。但是事實(shí)上，當(dāng)項(xiàng)目稍微上一點(diǎn)規(guī)模。你需要對(duì)你的項(xiàng)目進(jìn)行一個(gè)重新的架構(gòu)。1、封裝項(xiàng)目的基礎(chǔ)庫(kù)
一個(gè)基礎(chǔ)庫(kù)可能會(huì)耗費(fèi)一定的開發(fā)時(shí)間，但是如果項(xiàng)目具有一個(gè)優(yōu)秀的基礎(chǔ)庫(kù)作為支持，可以讓項(xiàng)目推進(jìn)的更快速。前期開發(fā)基礎(chǔ)庫(kù)耗費(fèi)的時(shí)間是可以補(bǔ)上來的，最關(guān)鍵的是，有基礎(chǔ)庫(kù)作為支持，我們可以保證項(xiàng)目的一個(gè)最低質(zhì)量下限。不至于多人合作項(xiàng)目，不同人寫出來的不同模塊質(zhì)量參次不齊。同時(shí)也保證了一個(gè)更好的可擴(kuò)展性。通常我們說的基礎(chǔ)庫(kù)包括-組件庫(kù)、基礎(chǔ) css 庫(kù)、基礎(chǔ)工具庫(kù)（比如項(xiàng)目的二次請(qǐng)求封裝，通用的緩存方法，通用的 cookie 操作等等）；
管理你的請(qǐng)求，建議把你項(xiàng)目的 api 層獨(dú)立出來為一個(gè)層級(jí)管理，這樣有利于在復(fù)雜接口下，更好的管理，降低復(fù)雜度。緩存一些請(qǐng)求信息，可以有效地減少請(qǐng)求，加快速度。比如我們從商品列表跳往商品詳情。我們可以利用 cookie 或者 localstore 緩存一下商品詳情，如果這個(gè)商品的詳情已經(jīng)被加載過了，就拿出來重復(fù)使用。
延遲加載一般是為了更快的看到內(nèi)容，我們一般會(huì)對(duì)于圖片等大資源進(jìn)行懶加載，再比如我們的組件懶加載。其實(shí)基本上所有的性能優(yōu)化，無非就是在從這兩方面想辦法。現(xiàn)代的前端工程和后端工程絕對(duì)不是寫代碼就行。會(huì)涉及到很多工程化的內(nèi)容，比如???webpack、服務(wù)器部署，更嚴(yán)格一點(diǎn)會(huì)有自動(dòng)化工程體系。這些會(huì)對(duì)項(xiàng)目的推進(jìn)非常有幫助對(duì)項(xiàng)目的質(zhì)量等等也會(huì)很有保證。我們一般對(duì)于項(xiàng)目的工程化改進(jìn)體現(xiàn)在以下三個(gè)方面。比如改進(jìn) webpack 配置來提升打包速度。使用自己的語法糖時(shí)，改動(dòng) webpack 來支持新的語法糖；控制代碼質(zhì)量，我們會(huì)通過?eslint?來實(shí)現(xiàn)；
自動(dòng)化部署，部署其實(shí)是是一件重復(fù)而浪費(fèi)時(shí)間的工作。我們可以把他自動(dòng)化。能省去我們很多成本。
如上說的這些可能說起來容易，學(xué)會(huì)的話就難。最好的學(xué)習(xí)方式，就是跟著按照思維導(dǎo)圖系統(tǒng)化的進(jìn)行實(shí)戰(zhàn)訓(xùn)練。
領(lǐng)取完整前端學(xué)習(xí)體系思維導(dǎo)圖遇到掃碼頻繁，請(qǐng)?jiān)俅巫R(shí)別哦當(dāng)然！僅僅有思維導(dǎo)圖還不夠，這邊給大家推薦一個(gè)學(xué)習(xí)平臺(tái)——網(wǎng)易云課堂學(xué)習(xí)，這里有免費(fèi)的前端實(shí)戰(zhàn)視頻教程及資料包，每周還有前端大佬的免費(fèi)直播課，可以在線提問，歡迎大家去這里學(xué)習(xí)前端課程！
一、技巧：《會(huì)用還要懂源碼，帶你學(xué)習(xí)vue-router源碼解析》1、vue-router的原理
2、vue-router源碼解析
3、手寫一個(gè)基礎(chǔ)的vue-router
二、實(shí)戰(zhàn)：《前端性能優(yōu)化，如何突破頁面性能瓶頸》1、SSR與CSR的優(yōu)缺點(diǎn)
2、SSR與CSR的不同的應(yīng)用場(chǎng)景
3、SSR的具體流程
三、項(xiàng)目：《用API層封裝為你的項(xiàng)目加速》1、如何管理自己的項(xiàng)目API層?
2、axios攔截思路
3、如何二次封裝請(qǐng)求庫(kù)
遇到掃碼頻繁，請(qǐng)?jiān)俅巫R(shí)別哦記得還有免費(fèi)直播資料！先到先得
