回顾vue开发spa(踩坑记录)
使用vueJS开发前端页面差不多也有大半多年了。由于项目后台管理页面最早都是使用JQ进行开发的,刚开始使用vue的时候,只能是直接在页面里面引入vueJS框架进行开发,期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了(没有用到组件,只是增强了一下交互,开发更简单便捷)。由于工期和个人习惯问题,期间也留下了很多坑和隐患,比如不少页面是JQ和vue混用,导致后来改功能的时候痛不欲生……
所以最近有一个新的后台管理页面,索性使用vue全家桶(vue,vue-router,vue-cil,vue-resource)进行开发了,组件之间的关联性不是很大,所以没用到vuex,状态传递我更多的是使用query参数进行传递(也就是get参数)。
下面就会说到在项目开发中遇到的各种问题了。
首先一开始的是,一定要用CNPM下载依赖!!!有遇到莫名其妙的问题话,删除依赖再重新下载一般是可以解决的
最坑的一次是,依赖下载没问题,已经开始开发好几天了,突然启动不了(npm run dev报错,npm run build可以),尝试删除依赖,重装CNPM,NPM,webpack,nodeJS还是不能解决……最后没办法只好重装电脑才终于可以启动运行了。
只要理解vue的组件、父子组件的消息状态传递(props/events),那么你就可以开始使用vue写SPA页面了。其他东西都可以边看API边写
.vue文件其实就是一段js模块,由vue-loader去进行解析成js,我们在使用webpack编译运行的时候:webpack会帮我们初始化所有的JS模块,当你需要的时候自动去请求指定模块进行渲染。
vue-resource本质上是跟JQ的ajax方法是一样的,你可以直接在mainJs里面进行全局请求的校验拦截(例如验证是否登陆之类)
this.$http({ method:'GET', url:'', body:{}, headers: {}, emulateJSON: true }).then(function(success){},function(error){}) //是不是感觉跟JQ的ajax相差无几
经常有人在群里问如何在vue或者react里面ajax……建议如果是对JavaScript的ajax不是很清楚的话(HTTP协议也是必须要了解的),先去了解一下XMLHttpRequest对象,这样不管是遇到什么前端框架,写ajax请求都是没有问题滴~
了解vue-router的各种钩子函数方法,路由机制和使用,常用的钩子函数无非是beforeEach(组件路由跳转前),afterEach(组件路由跳转后)
这方面我自己做的也不是很好,只懂的如何使用,还是要继续学习~