基于vue项目的知识总结

tianlai 发布于2019-08-29 14:07 / 1224人阅读

摘要：前言用有一段时间了，从用搭建项目一步步配置，到之后的研究动效这些，一直想写些东西记录一下做个总结，刚好趁着有空就整理一下。结语有新的知识点会更新到知识体系中，总结和心得体会会多带带写文章详述，努力填坑

前言

用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本身也有很多黑科技来实现一些常见需求；最神奇的是在封装组件的时候，真的要好好设计里面的样式，不然父子组件相互影响真的是很坑爹的事情。

结语

有新的知识点会更新到“知识体系”中，总结和心得体会会多带带写文章详述，努力填坑~

专线服务私有云基于webrtc的项目基于webrtc的开源项目位段知识总结 linux数据结构知识点总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112937.html

前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0