回顾vue开发spa（踩坑记录）

Posted 2020-09-22

　　　　使用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（组件路由跳转后） 这方面我自己做的也不是很好，只懂的如何使用，还是要继续学习~