基於vue專案的知識總結

用vue有一段時間了，從用vue-cli搭建專案、一步步配置axios、vuex、vue-router，到之後的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著有空就整理一下。這裡先占個坑，列一下大綱，具體某一方面的總結會單獨寫文章，放鏈結在本文中，之後會不定期更新來填坑。

手機端vue專案構建及相關配置：eslint、scss、axios、檔案層級

vue專案實踐1——構建專案

canvas繪圖基礎：旋轉、定位、離屏、模糊問題

前端圖形——繪圖、截圖、合成**

動效系列

動效成果展——背景動效

用vue-cli一鍵構建：vue init webpack ***。構建過程中會給幾個選項：eslint、unit tests、e2e tests。

其中eslint是約束**規範的，建議啟用，繼承使用eslint-plugin-vue的配置，可以較好約束vue專案中的**規範。具體的規範要求和配置，可以查閱eslint和eslint-plugin-vue的官方文件。

unit tests和e2e tests都是測試用的，可以寫測試用例進行單元測試，我這邊沒用到就沒配置。

vue-router會在構建專案時自動配好，然後vuex和axios需要我們自己安裝配置。

這裡對於vue-router和vuex的配置都建議先建立好檔案層級關係。如下圖中的vue-router的配置：

index.js中進行根級別的路由的配置，子模組的配置都在modules中新建對應的路由表檔案。

axios的配置的話也是必要的，需要配置請求時限、請求路由、請求***和響應***等，統一配置後，直接綁為vue的屬性，用起來很方便。

手機端配置完各種meta屬性，引入手機端樣式配置檔案，配置好scss和flexible布局，然後就可以非常愉快的用vue進行手機端專案的開發了。

瀏覽器級別的localstorage：主要做資料快取，減少請求，瀏覽器關閉後失效；

專案級別的vuex：主要做全域性變數，跨頁面資料互動，頁面重新整理時失效；

頁面級別的data、computed：主要是頁面內的資料渲染和處理，路由跳轉時失效；

臨時變數（介面返回、自定義）：主要是進行資料處理，結果存入上述幾個位置，再被使用。

canvas繪圖的可以參見我此前的兩篇文章，有對canvas繪圖做一些基礎介紹。

canvas截圖是目前前端實現截圖的手段，具體實現可參見html2canvas，前段時間作者進行了更新，新版本可實現高畫質截圖並且對新的css樣式進行了相容處理，值得研究。

canvas截圖的原理是讀取dom元素，解析後繪製成canvas物件，再通過canvas轉成格式。所以這裡的樣式相容，其實也就是能不能正確解析某個樣式，還原對應的顯示效果。

新版本中沒有純粹用canvas繪圖，而是用svg轉成canvas的。svg本身能實現的效果沒canvas好，多用於向量圖和線條，不過效能要求比canvas低，用svg替代canvas做前處理，對效能上也會有提公升。

樣式真的是乙個需要打磨和經驗的東西。css3的新特性提供了旋轉、動畫，可以方便的做出各種css動效；css本身也有很多黑科技來實現一些常見需求；最神奇的是在封裝元件的時候，真的要好好設計裡面的樣式，不然父子元件相互影響真的是很坑爹的事情。

有新的知識點會更新到「知識體系」中，總結和心得體會會單獨寫文章詳述，努力填坑~