本篇為博主首次參與項(xiàng)目的一些自我總結(jié)。博主加入前端工作大半年的時(shí)間，如果要算上正式完整的項(xiàng)目流，其實(shí)只有上個(gè)月剛剛完成的項(xiàng)目才算的上一個(gè)完整的項(xiàng)目流，經(jīng)過了一個(gè)月沒日沒夜的加班，總算是在今天項(xiàng)目上線，所以接下來比較清閑，才能做在這里，分享自己項(xiàng)目中的一些事。

此前其實(shí)博主一直沒有能完整的接觸到一個(gè)前后端分離的項(xiàng)目，從項(xiàng)目立案，到開發(fā)，測(cè)試，部署上線等等這一系列的流程都是比較懵的，半路出家對(duì)這些一直不是很了解，能有一個(gè)這樣的完整的項(xiàng)目經(jīng)驗(yàn)也是對(duì)自己的一個(gè)前端生涯的正式開始，當(dāng)然對(duì)于各位資深前端來說，博主也是顯得非常稚嫩，希望能夠得到指點(diǎn)。

首先先簡(jiǎn)單收下我們這個(gè)項(xiàng)目前端部分的一個(gè)工作流，項(xiàng)目也是基于Vue+element+axios+vuex+vue-router的一個(gè)前后端分離的項(xiàng)目

1. 前端vue項(xiàng)目工作流：

• 作為前端我們首先拿到原型以后簡(jiǎn)單分析原型頁(yè)面之間的邏輯關(guān)系，以及各個(gè)按鈕跳轉(zhuǎn)頁(yè)面的情況，對(duì)于可復(fù)用的頁(yè)面寫成單獨(dú)的組件，以便復(fù)用，減少代碼重復(fù)，以及代碼復(fù)用始終是我們追求的目標(biāo)，博主每次看到重復(fù)的代碼怎么看怎么不順眼，實(shí)際除了項(xiàng)目的原型圖以外，應(yīng)該還是有設(shè)計(jì)稿，但是此次項(xiàng)目比較著急，因此我們就是對(duì)著原型來寫的頁(yè)面。
• 分析項(xiàng)目可能用到的插件以及依賴等，設(shè)計(jì)路由、開發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境的配置等。如果一開始沒有確定好這些的話，后期加上也行，但是你會(huì)發(fā)現(xiàn)后期要改的地方非常多，所以一開始就要確定好你所需要的插件，依賴，以及一些前端的配置等等。
• 進(jìn)行頁(yè)面開發(fā)的時(shí)候，注意屏幕分辨率的適配問題，以免電腦分辨率不同，導(dǎo)致布局混亂。博主就是沒有經(jīng)驗(yàn)?zāi)欠N，前期一股腦將頁(yè)面全部都寫好了，等到后期調(diào)試的時(shí)候才發(fā)現(xiàn)很多頁(yè)面適配分辨率問題太多，然后又一一去改，非常耽誤開發(fā)的效率，另外還要考慮到圖片的縮放等等，都是需要特殊布局的，不然屏幕分辨率發(fā)生變化的話，圖片會(huì)被拉伸。
• 不知道大公司的前端是怎么樣做的，我們公司一般是寫好頁(yè)面以后，有后端的人來將數(shù)據(jù)集成到頁(yè)面上，所以理論來說，我們寫完了頁(yè)面，其實(shí)開發(fā)就已經(jīng)完成了，不過對(duì)于我來說，如果前端只是單純寫頁(yè)面的話，那就是浪費(fèi)資源，又何必弄前后端分離呢，不過這次因?yàn)轫?xiàng)目開發(fā)時(shí)間緊，因此也沒有接口文檔，一般根據(jù)后端提供的接口文檔，將數(shù)據(jù)集成展示到頁(yè)面上。沒有接口文檔，博主就只能擔(dān)任輔助位置，告訴后端的小伙伴該怎么請(qǐng)求接口。
• 當(dāng)我們從后臺(tái)獲取數(shù)據(jù)以后，一定要寫判斷防止未獲取到數(shù)據(jù)的情況下捕獲錯(cuò)誤，切記切記，博主在這上面吃了很大的虧。不要以為捕獲錯(cuò)誤是后端做的事，前端是不需要的。當(dāng)我們的代碼或者是http請(qǐng)求錯(cuò)誤的話，Jin靠頁(yè)面報(bào)錯(cuò)顯示是無法定位錯(cuò)誤在哪里，并且嚴(yán)重的錯(cuò)誤直接導(dǎo)致程序運(yùn)行不下去，這都不是我們想要看到的，我們需要捕獲錯(cuò)誤，最好能做出提示信息等等，比如token過期，promise的reject捕獲的錯(cuò)誤。axios提供了請(qǐng)求和響應(yīng)的攔截器，我們可以封裝一個(gè)axios的請(qǐng)求，在請(qǐng)求中去定義攔截器，能夠捕獲到大部分的http的請(qǐng)求錯(cuò)誤。
• 頁(yè)面完成后，對(duì)頁(yè)面的各個(gè)跳轉(zhuǎn)，按鈕等功能進(jìn)行簡(jiǎn)單初步測(cè)試，以免出現(xiàn)一些不應(yīng)該出現(xiàn)的簡(jiǎn)單邏輯錯(cuò)誤，不要認(rèn)為頁(yè)面寫完了就完事了，實(shí)際上頁(yè)面寫完才是開始，很多簡(jiǎn)單的邏輯錯(cuò)誤都是我們一試就可以試出來的，博主當(dāng)時(shí)就是想當(dāng)然了，總以為應(yīng)該可以了，連簡(jiǎn)單的點(diǎn)點(diǎn)按鈕頁(yè)面跳轉(zhuǎn)都沒有自己去測(cè)試，結(jié)果最后測(cè)試的時(shí)候，測(cè)試的小伙伴一直無奈的看著博主，說你的bug怎么這么多。在沒有經(jīng)歷過完整的項(xiàng)目之前，博主對(duì)于測(cè)試這種事都是一帶而過，現(xiàn)在才發(fā)現(xiàn)一個(gè)有經(jīng)驗(yàn)的前端還是需要經(jīng)過一定的測(cè)試的，所以博主也考慮接下學(xué)習(xí)一些單元測(cè)試等等的簡(jiǎn)單測(cè)試
• 經(jīng)過了前面一系列的洗禮之后，我們的項(xiàng)目終于上線了，但是一上線之后，發(fā)現(xiàn)首頁(yè)打開的時(shí)候，竟然時(shí)間長(zhǎng)達(dá)30多秒，好了，一看代碼，問題又出來了，項(xiàng)目用到的echarts圖標(biāo)是全部引入的，但是實(shí)際并沒有用到所有的圖標(biāo)，所以最后全部修改為按需引入使用的幾個(gè)圖表，再一打包，果然一下子減了400多k，然后再一看用到的圖片都是七八百k的，問了一下公司的前端大神，才知道圖片需要壓縮一下，雖然像素有所損失，但是大小甚至可以減掉一半（畢竟博主的項(xiàng)目并不是電商什么的，對(duì)于圖片要求其實(shí)并不是很大），這樣再一壓縮，打包又小了幾百k，服務(wù)端開了gzip之后，也是可以正常瀏覽了。

下面也是自己第一次使用vue寫前端項(xiàng)目遇到的問題的一些經(jīng)驗(yàn)之談吧，了解的同學(xué)可以直接跳過了。

2. vue知識(shí)點(diǎn)集合

• this關(guān)鍵詞在vue當(dāng)中的應(yīng)用以及何時(shí)使用this，怎么去使用this。具體大家可以參考博主之前寫的一篇博文
• 生命周期方法的運(yùn)用，created表示組件創(chuàng)造的時(shí)候，DOM元素還未生成，所以此時(shí)不要操作DOM元素，一般在mounted方法中DOM元素已經(jīng)生成了。
• window.open方法打開新頁(yè)面，如果是在異步請(qǐng)求中打開新頁(yè)面則會(huì)失效，需要賦值給一個(gè)變量，然后用變量.location.href = url這樣的方法來打開。這個(gè)是博主項(xiàng)目需要下載pdf的時(shí)候，從后臺(tái)獲取數(shù)據(jù)，然后直接打開window.open發(fā)現(xiàn)沒有想過，然后上網(wǎng)搜了一下，發(fā)現(xiàn)有這樣一個(gè)說法，也算是給不知道的同學(xué)提個(gè)醒。
• Vue.nextTick()用于數(shù)據(jù)改變后，操作DOM的方法，因?yàn)関ue是異步執(zhí)行DOM更新的，在data數(shù)據(jù)被修改的時(shí)，DOM并不會(huì)立刻更新，而是更新放入隊(duì)列中，等到所有的數(shù)據(jù)更新完畢以后，才會(huì)執(zhí)行隊(duì)列中的DOM更新，因此要拿到更新后的DOM進(jìn)行操作，則必須在nextTick()方法中執(zhí)行回調(diào)。這個(gè)方法在vue文檔的api中就有介紹，不過博主這個(gè)項(xiàng)目用到的不多。

3. element注意點(diǎn)集合

• 表單的item元素如果需要驗(yàn)證的話，需要添加prop屬性，不然驗(yàn)證無效。另外如果是自定義驗(yàn)證的話，驗(yàn)證的方法是寫在data函數(shù)的前面，因?yàn)閞eturn就直接返回結(jié)果了，需要注意的是因?yàn)樽远x驗(yàn)證是寫在前面，所以data中返回的數(shù)據(jù)，在驗(yàn)證中都是無法使用的。
• 我們使用element的組件，有的時(shí)候可能需要修改一下其中的一些樣式，但是我們發(fā)現(xiàn)直接給組件賦class是沒有用的，這樣的話，我們其實(shí)可以嘗試使用新的css的語(yǔ)法/deep/這樣可以將樣式穿透到組件內(nèi)部，使樣式生效，當(dāng)然不是所有的情況都可以，需要根據(jù)具體的情況來定。