資訊專欄INFORMATION COLUMN
摘要：前言用有一段時間了，從用搭建項目一步步配置，到之后的研究動效這些，一直想寫些東西記錄一下做個總結，剛好趁著有空就整理一下。結語有新的知識點會更新到知識體系中，總結和心得體會會多帶帶寫文章詳述，努力填坑
前言
用vue有一段時間了，從用vue-cli搭建項目、一步步配置axios、vuex、vue-router，到之后的研究canvas、動效這些，一直想寫些東西記錄一下、做個總結，剛好趁著有空就整理一下。這里先占個坑，列一下大綱，具體某一方面的總結會多帶帶寫文章，放鏈接在本文中，之后會不定期更新來填坑。
詳解鏈接手機端vue項目構建及相關配置：eslint、scss、axios、文件層級
vue項目實踐1——構建項目
canvas繪圖基礎：旋轉、定位、離屏、模糊問題
前端圖形——繪圖、截圖、合成動圖
動效系列
動效成果展——背景動效
用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截屏是目前前端實現截屏的手段，具體實現可參見html2Canvas，前段時間作者進行了更新，新版本可實現高清截圖并且對新的css樣式進行了兼容處理，值得研究。
canvas截屏的原理是讀取dom元素，解析后繪制成canvas對象，再通過canvas轉成圖片格式。所以這里的樣式兼容，其實也就是能不能正確解析某個樣式，還原對應的顯示效果。
新版本中沒有純粹用canvas繪圖，而是用svg轉成canvas的。svg本身能實現的效果沒canvas好，多用于矢量圖和線條，不過性能要求比canvas低，用svg替代canvas做前處理，對性能上也會有提升。
樣式真的是一個需要打磨和經驗的東西。css3的新特性提供了旋轉、動畫，可以方便的做出各種css動效；css本身也有很多黑科技來實現一些常見需求；最神奇的是在封裝組件的時候，真的要好好設計里面的樣式，不然父子組件相互影響真的是很坑爹的事情。
結語有新的知識點會更新到“知識體系”中，總結和心得體會會多帶帶寫文章詳述，努力填坑~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112937.html
摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...
摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
閱讀 828·2023-04-25 19:40
閱讀 3488·2023-04-25 17:41
閱讀 3002·2021-11-11 11:01
閱讀 2612·2019-08-30 15:55
閱讀 3227·2019-08-30 15:44
閱讀 1358·2019-08-29 14:07
閱讀 484·2019-08-29 11:23
閱讀 1326·2019-08-27 10:54
