前言使用vue有一段时间了，从用vue-cli搭建项目，一步步配置axios、vuex、vue-router，到后来研究canvas和动效，一直以来想写点东西记录一下，做个总结，有时间整理一下。这里先挖个坑，列一下大纲。某个方面的具体总结会单独写一篇文章，链接放在本文，不定时更新，填坑。手机端vue项目搭建及相关配置详解链接：eslint、scss、axios、文件级vue项目实战1-搭建项目canvas绘图基础：旋转、定位、离屏、模糊问题前端绘图-绘图、截图、合成动画人物动效系列动效成果展示-背景动效知识体系来自vue项目使用vue-cli构建项目用vue-cli一键构建：vueinitwebpackxxx.构建过程中会给出几个选项：eslint、单元测试、e2e测试。其中，eslint约束了代码规范。建议启用它。继承eslint-plugin-vue的配置可以更好的约束Vue项目中的代码规范。具体的规范要求和配置可以参考eslint和eslint-plugin-vue的官方文档。单元测试和端到端测试都用于测试。您可以为单元测试编写测试用例。如果我不使用它们，我不会在这里配置它们。配置vue全家桶vue-router会在构建项目的时候自动配置，然后需要自己安装配置vuex和axios。vue-router和vuex的配置建议先建立文件层次。vue-router的配置如下图所示：在index.js中配置根级路由，在modules中对应的路由表文件中创建子模块的配置。axios的配置也是必须的。需要配置请求时限、请求路由、请求拦截器、响应拦截器。统一配置后，直接绑定为vue的一个属性，使用起来非常方便。移动端配置在移动端配置好各种meta属性，导入移动端样式配置文件，配置好scss和灵活布局，就可以愉快的使用Vue开发移动端项目了。数据管理Browser-levellocalstorage：主要用于数据缓存，减少请求，浏览器关闭后失效；项目级vuex：主要是全局变量，跨页面数据交互，页面刷新时失效；page-leveldataandcomputed：主要是页面中的数据渲染和处理，路由跳转时会失败；临时变量（接口返回，自定义）：主要用于数据处理，使用前将结果存放在上述位置。Canvas绘图&截图Canvas绘图可以参考我之前的两篇文章，里面有一些关于canvas绘图的基本介绍。Canvas截屏是目前前端截屏的手段。具体实现请参考html2Canvas。作者前段时间更新了。新版本可以实现高清截图，兼容新的css样式。值得研究。canvas截屏的原理是读取dom元素，解析后绘制成canvas对象，再通过canvas转换成图片格式。所以，这里的样式兼容，其实就是指能否正确解析某种样式，并能还原出相应的显示效果。在新版本中，不再是单纯用canvas画图，而是用svg转成canvas。svg本身能达到的效果是不如canvas的。多用于矢量图形和线条，但性能要求低于canvas。使用svg而不是canvas进行预处理也会提高性能。cssstyling样式设计真的是一件需要打磨和经验的事情。css3的新特性提供了旋转和动画，可以轻松制作各种css动态效果；css本身也有很多黑科技可以实现一些常用的需求；最神奇的是，在封装组件的时候，真的需要设计里面的Style，不然父子组件交互真的是骗人的事情。在结论中，如果有新的知识点，就会更新到“知识系统”中。总结和经验会单独写一篇文章来详述，尽量填坑~
