摘要：前言用有一段時(shí)間了，從用搭建項(xiàng)目一步步配置，到之后的研究動(dòng)效這些，一直想寫些東西記錄一下做個(gè)總結(jié)，剛好趁著有空就整理一下。結(jié)語(yǔ)有新的知識(shí)點(diǎn)會(huì)更新到知識(shí)體系中，總結(jié)和心得體會(huì)會(huì)多帶帶寫文章詳述，努力填坑

用vue有一段時(shí)間了，從用vue-cli搭建項(xiàng)目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動(dòng)效這些，一直想寫些東西記錄一下、做個(gè)總結(jié)，剛好趁著有空就整理一下。這里先占個(gè)坑，列一下大綱，具體某一方面的總結(jié)會(huì)多帶帶寫文章，放鏈接在本文中，之后會(huì)不定期更新來(lái)填坑。

手機(jī)端vue項(xiàng)目構(gòu)建及相關(guān)配置：eslint、scss、axios、文件層級(jí)
vue項(xiàng)目實(shí)踐1——構(gòu)建項(xiàng)目

canvas繪圖基礎(chǔ)：旋轉(zhuǎn)、定位、離屏、模糊問題
前端圖形——繪圖、截圖、合成動(dòng)圖

動(dòng)效系列
動(dòng)效成果展——背景動(dòng)效

用vue-cli構(gòu)建項(xiàng)目

用vue-cli一鍵構(gòu)建：vue init webpack xxx。構(gòu)建過程中會(huì)給幾個(gè)選項(xiàng)：eslint、unit tests、e2e tests。

其中eslint是約束代碼規(guī)范的，建議啟用，繼承使用eslint-plugin-vue的配置，可以較好約束vue項(xiàng)目中的代碼規(guī)范。具體的規(guī)范要求和配置，可以查閱eslint和eslint-plugin-vue的官方文檔。
unit tests和e2e tests都是測(cè)試用的，可以寫測(cè)試用例進(jìn)行單元測(cè)試，我這邊沒用到就沒配置。

配置vue全家桶

vue-router會(huì)在構(gòu)建項(xiàng)目時(shí)自動(dòng)配好，然后vuex和axios需要我們自己安裝配置。

這里對(duì)于vue-router和vuex的配置都建議先建立好文件層級(jí)關(guān)系。如下圖中的vue-router的配置：
index.js中進(jìn)行根級(jí)別的路由的配置，子模塊的配置都在modules中新建對(duì)應(yīng)的路由表文件。

axios的配置的話也是必要的，需要配置請(qǐng)求時(shí)限、請(qǐng)求路由、請(qǐng)求攔截器和響應(yīng)攔截器等，統(tǒng)一配置后，直接綁為vue的屬性，用起來(lái)很方便。

手機(jī)端配置

手機(jī)端配置完各種meta屬性，引入手機(jī)端樣式配置文件，配置好scss和flexible布局，然后就可以非常愉快的用vue進(jìn)行手機(jī)端項(xiàng)目的開發(fā)了。

瀏覽器級(jí)別的localstorage：主要做數(shù)據(jù)緩存，減少請(qǐng)求，瀏覽器關(guān)閉后失效；
項(xiàng)目級(jí)別的vuex：主要做全局變量，跨頁(yè)面數(shù)據(jù)交互，頁(yè)面刷新時(shí)失效；
頁(yè)面級(jí)別的data、computed：主要是頁(yè)面內(nèi)的數(shù)據(jù)渲染和處理，路由跳轉(zhuǎn)時(shí)失效；
臨時(shí)變量（接口返回、自定義）：主要是進(jìn)行數(shù)據(jù)處理，結(jié)果存入上述幾個(gè)位置，再被使用。

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

canvas截屏是目前前端實(shí)現(xiàn)截屏的手段，具體實(shí)現(xiàn)可參見html2Canvas，前段時(shí)間作者進(jìn)行了更新，新版本可實(shí)現(xiàn)高清截圖并且對(duì)新的css樣式進(jìn)行了兼容處理，值得研究。

canvas截屏的原理是讀取dom元素，解析后繪制成canvas對(duì)象，再通過canvas轉(zhuǎn)成圖片格式。所以這里的樣式兼容，其實(shí)也就是能不能正確解析某個(gè)樣式，還原對(duì)應(yīng)的顯示效果。
新版本中沒有純粹用canvas繪圖，而是用svg轉(zhuǎn)成canvas的。svg本身能實(shí)現(xiàn)的效果沒canvas好，多用于矢量圖和線條，不過性能要求比canvas低，用svg替代canvas做前處理，對(duì)性能上也會(huì)有提升。

樣式真的是一個(gè)需要打磨和經(jīng)驗(yàn)的東西。css3的新特性提供了旋轉(zhuǎn)、動(dòng)畫，可以方便的做出各種css動(dòng)效；css本身也有很多黑科技來(lái)實(shí)現(xiàn)一些常見需求；最神奇的是在封裝組件的時(shí)候，真的要好好設(shè)計(jì)里面的樣式，不然父子組件相互影響真的是很坑爹的事情。

有新的知識(shí)點(diǎn)會(huì)更新到“知識(shí)體系”中，總結(jié)和心得體會(huì)會(huì)多帶帶寫文章詳述，努力填坑~