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

    

时间: 2024-10-30 03:37:57

回顾vue开发spa(踩坑记录)的相关文章

IDFA踩坑记录

IDFA踩坑记录: 1.iOS10.0 以下,即使打开"限制广告跟踪",依然可以读取idfa: 2.打开"限制广告跟踪",然后再关闭"限制广告跟踪",idfa会改变: 3.越狱机器安装开发证书打的包,读取的idfa正常: 4.越狱机器安装本地打的发布证书的包,读取idfa异常,第一次打开app读取的是一个错误的idfa,第二次打开会变成另外一个错误的idfa: 5.越狱机器安装Testflight的包,读取idfa异常,第一次打开app读取的是一

unionId突然不能获取的踩坑记录

昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html),unionid可以在第二步(https://api.weixin.qq.com/sns/oauth2/access_token)和第四步的2个接口中获得.其中,第四步的接口是

【Pysc2】Deepmind Pysc2 环境配置及其踩坑记录

1. 下载星际争霸II游戏 可以直接下暴雪战网,然后在战网内下载. 2. 下载Pysc2 cmd后在命令行输入 pip install pysc2 3. 下载sc2 cmd后在命令行输入 pip install sc2 4. 下载地图 https://github.com/ClausewitzCPU0/SC2AI 解压密码: iagreetotheeula (表示自己同意最终用户许可协议) 解压在Maps的文件夹,我是使用的暴雪战网下载的游戏,发现游戏文件夹里并没有Maps, 需要自己手动创建.

vue 组件传值踩坑日记 1

今天在用平时很少用到的传值方式,是V2.4以后新加入属性$attrs $listener 以及inheritAttrs. 总结:这样形式的代码适合套娃模式的组件传递,却不适合兄弟组件的传值,那样的传值方式,需要创建一个事件总线,说白了就是新new一个空的vue,详见,我的第二篇日志<vue 组件传值踩坑日记 2> 废话不多说,直接上代码,大家可以边看注释边测试一下效果吧 <!DOCTYPE html> <html lang="en"> <hea

Linux Git 踩坑记录

Linux Git 踩坑记录 git cherry-pick 冲突解决 出现: error: could not apply xxxxxx(commit ID)... ***** hint: after resolving the conflicts, mark the corrected paths hint: with 'git add ' or 'git rm ' hint: and commit the result with 'git commit' 此时使用git status命令查

vue配置环境踩坑

Vue 环境配置踩坑 目录 Vue 环境配置踩坑 windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. npm和cnpm都是在git的全局环境下下载的 且安装完cnpm,nodejs文件夹下就已经有了node_cache.node_global这两个文件夹: 而且在用户变量里path变量路径已经存在

微信小程序之蓝牙 BLE 踩坑记录

前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE_MiniProgram API简介 微信小程序目前有蓝牙 API 共 18 个,其中操作蓝牙适配器的共有 4 个,分别是 wx.openBluetoothAdapter 初始化蓝牙适配器 wx.closeBluetoothAdapter 关闭蓝牙模块 wx.getBluetoothAdapterS

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通

微信小程序开发问题踩坑整理,web-view、openID、小程序支付等汇总

微信小程序开发过程中遇到的问题踩坑整理,内容包括web-view.openID.小程序支付.网络请求等等一系列问题汇总,希望对大家能有一定帮助和启发. 内容如下: 关于小程序web-view bindmessage 真机不触发的问题 小程序iOS访问服务器访问不上,但android没有问题 关于ssl证书加密后小程序访问出错问题 微信拨打电话数据调用问题,如何一键拨号 后台php调用微信小程序接口获取openid,返回的是null 小程序图片显示问题,开发者工具显示,手机预览不显示 微信小程序支