基於vue項目的知識總結

前言

用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到以後的研究canvas、動效這些，一直想寫些東西記錄一下、作個總結，恰好趁着有空就整理一下。這裏先佔個坑，列一下大綱，具體某一方面的總結會單獨寫文章，放連接在本文中，以後會不按期更新來填坑。

詳解連接

手機端vue項目構建及相關配置：eslint、scss、axios、文件層級
vue項目實踐1——構建項目

canvas繪圖基礎：旋轉、定位、離屏、模糊問題
前端圖形——繪圖、截圖、合成動圖

動效系列
動效成果展——背景動效

知識體系

起vue項目

• 用vue-cli構建項目

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

其中eslint是約束代碼規範的，建議啓用，繼承使用eslint-plugin-vue的配置，能夠較好約束vue項目中的代碼規範。具體的規範要求和配置，能夠查閱eslint和eslint-plugin-vue的官方文檔。
unit tests和e2e tests都是測試用的，能夠寫測試用例進行單元測試，我這邊沒用到就沒配置。

• 配置vue全家桶

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繪圖作一些基礎介紹。

canvas截屏是目前前端實現截屏的手段，具體實現可參見html2Canvas，前段時間做者進行了更新，新版本可實現高清截圖而且對新的css樣式進行了兼容處理，值得研究。

canvas截屏的原理是讀取dom元素，解析後繪製成canvas對象，再經過canvas轉成圖片格式。因此這裏的樣式兼容，其實也就是能不能正確解析某個樣式，還原對應的顯示效果。
新版本中沒有純粹用canvas繪圖，而是用svg轉成canvas的。svg自己能實現的效果沒canvas好，多用於矢量圖和線條，不過性能要求比canvas低，用svg替代canvas作前處理，對性能上也會有提高。

css樣式

樣式真的是一個須要打磨和經驗的東西。css3的新特性提供了旋轉、動畫，能夠方便的作出各類css動效；css自己也有不少黑科技來實現一些常見需求；最神奇的是在封裝組件的時候，真的要好好設計裏面的樣式，否則父子組件相互影響真的是很坑爹的事情。

結語

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