基于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本身也有很多黑科技来实现一些常见需求;最神奇的是在封装组件的时候,真的要好好设计里面的样式,不然父子组件相互影响真的是很坑爹的事情。
结语
有新的知识点会更新到“知识体系”中,总结和心得体会会单独写文章详述,努力填坑~