本篇為博主首次參與專案的一些自我總結。博主加入前端工作大半年的時間，如果要算上正式完整的專案流，其實只有上個月剛剛完成的專案才算的上一個完整的專案流，經過了一個月沒日沒夜的加班，總算是在今天專案上線，所以接下來比較清閒，才能做在這裡，分享自己專案中的一些事。
此前其實博主一直沒有能完整的接觸到一個前後端分離的專案，從專案立案，到開發，測試，部署上線等等這一系列的流程都是比較懵的，半路出家對這些一直不是很瞭解，能有一個這樣的完整的專案經驗也是對自己的一個前端生涯的正式開始，當然對於各位資深前端來說，博主也是顯得非常稚嫩，希望能夠得到指點。
首先先簡單收下我們這個專案前端部分的一個工作流，專案也是基於Vue+element+axios+vuex+vue-router的一個前後端分離的專案
- 前端vue專案工作流：
- 作為前端我們首先拿到原型以後簡單分析原型頁面之間的邏輯關係，以及各個按鈕跳轉頁面的情況，對於可複用的頁面寫成單獨的元件，以便複用，減少程式碼重複，以及程式碼複用始終是我們追求的目標，博主每次看到重複的程式碼怎麼看怎麼不順眼，實際除了專案的原型圖以外，應該還是有設計稿，但是此次專案比較著急，因此我們就是對著原型來寫的頁面。
- 分析專案可能用到的外掛以及依賴等，設計路由、開發環境、測試環境和生產環境的配置等。如果一開始沒有確定好這些的話，後期加上也行，但是你會發現後期要改的地方非常多，所以一開始就要確定好你所需要的外掛，依賴，以及一些前端的配置等等。
- 進行頁面開發的時候，注意螢幕解析度的適配問題，以免電腦解析度不同，導致佈局混亂。博主就是沒有經驗那種，前期一股腦將頁面全部都寫好了，等到後期除錯的時候才發現很多頁面適配解析度問題太多，然後又一一去改，非常耽誤開發的效率，另外還要考慮到圖片的縮放等等，都是需要特殊佈局的，不然螢幕解析度發生變化的話，圖片會被拉伸。
- 不知道大公司的前端是怎麼樣做的，我們公司一般是寫好頁面以後，有後端的人來將資料整合到頁面上，所以理論來說，我們寫完了頁面，其實開發就已經完成了，不過對於我來說，如果前端只是單純寫頁面的話，那就是浪費資源，又何必弄前後端分離呢，不過這次因為專案開發時間緊，因此也沒有介面文件，一般根據後端提供的介面文件，將資料整合展示到頁面上。沒有介面文件，博主就只能擔任輔助位置，告訴後端的小夥伴該怎麼請求介面。
- 當我們從後臺獲取資料以後，一定要寫判斷防止未獲取到資料的情況下捕獲錯誤，切記切記，博主在這上面吃了很大的虧。不要以為捕獲錯誤是後端做的事，前端是不需要的。當我們的程式碼或者是http請求錯誤的話，Jin靠頁面報錯顯示是無法定位錯誤在哪裡，並且嚴重的錯誤直接導致程式執行不下去，這都不是我們想要看到的，我們需要捕獲錯誤，最好能做出提示資訊等等，比如token過期，promise的reject捕獲的錯誤。axios提供了請求和響應的攔截器，我們可以封裝一個axios的請求，在請求中去定義攔截器，能夠捕獲到大部分的http的請求錯誤。
- 頁面完成後，對頁面的各個跳轉，按鈕等功能進行簡單初步測試，以免出現一些不應該出現的簡單邏輯錯誤，不要認為頁面寫完了就完事了，實際上頁面寫完才是開始，很多簡單的邏輯錯誤都是我們一試就可以試出來的，博主當時就是想當然了，總以為應該可以了，連簡單的點點按鈕頁面跳轉都沒有自己去測試，結果最後測試的時候，測試的小夥伴一直無奈的看著博主，說你的bug怎麼這麼多。在沒有經歷過完整的專案之前，博主對於測試這種事都是一帶而過，現在才發現一個有經驗的前端還是需要經過一定的測試的，所以博主也考慮接下學習一些單元測試等等的簡單測試
- 經過了前面一系列的洗禮之後，我們的專案終於上線了，但是一上線之後，發現首頁開啟的時候，竟然時間長達30多秒，好了，一看程式碼，問題又出來了，專案用到的echarts圖示是全部引入的，但是實際並沒有用到所有的圖示，所以最後全部修改為按需引入使用的幾個圖表，再一打包，果然一下子減了400多k，然後再一看用到的圖片都是七八百k的，問了一下公司的前端大神，才知道圖片需要壓縮一下，雖然畫素有所損失，但是大小甚至可以減掉一半（畢竟博主的專案並不是電商什麼的，對於圖片要求其實並不是很大），這樣再一壓縮，打包又小了幾百k，服務端開了gzip之後，也是可以正常瀏覽了。
下面也是自己第一次使用vue寫前端專案遇到的問題的一些經驗之談吧，瞭解的同學可以直接跳過了。
- vue知識點集合
- this關鍵詞在vue當中的應用以及何時使用this，怎麼去使用this。具體大家可以參考博主之前寫的一篇博文
- 生命週期方法的運用，created表示元件創造的時候，DOM元素還未生成，所以此時不要操作DOM元素，一般在mounted方法中DOM元素已經生成了。
- window.open方法開啟新頁面，如果是在非同步請求中開啟新頁面則會失效，需要賦值給一個變數，然後用變數.location.href = url這樣的方法來開啟。這個是博主專案需要下載pdf的時候，從後臺獲取資料，然後直接開啟window.open發現沒有想過，然後上網搜了一下，發現有這樣一個說法，也算是給不知道的同學提個醒。
- Vue.nextTick()用於資料改變後，操作DOM的方法，因為vue是非同步執行DOM更新的，在data資料被修改的時，DOM並不會立刻更新，而是更新放入佇列中，等到所有的資料更新完畢以後，才會執行佇列中的DOM更新，因此要拿到更新後的DOM進行操作，則必須在nextTick()方法中執行回撥。這個方法在vue文件的api中就有介紹，不過博主這個專案用到的不多。
- element注意點集合
- 表單的item元素如果需要驗證的話，需要新增prop屬性，不然驗證無效。另外如果是自定義驗證的話，驗證的方法是寫在data函式的前面，因為return就直接返回結果了，需要注意的是因為自定義驗證是寫在前面，所以data中返回的資料，在驗證中都是無法使用的。
- 我們使用element的元件，有的時候可能需要修改一下其中的一些樣式，但是我們發現直接給元件賦class是沒有用的，這樣的話，我們其實可以嘗試使用新的css的語法/deep/這樣可以將樣式穿透到元件內部，使樣式生效，當然不是所有的情況都可以，需要根據具體的情況來定。