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

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

首先先簡單收下我們這個項目前端部分的一個工作流，項目也是基于Vue+element+axios+vuex+vue-router的一個前后端分離的項目

1. 前端vue項目工作流：

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

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

2. vue知識點集合

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

3. element注意點集合

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