关键词：
使用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（组件路由跳转后） 这方面我自己做的也不是很好，只懂的如何使用，还是要继续学习~
vue+electron开发踩坑记录(代码片段)
文章目录背景框架选型开发过程踩坑记录问题1vue-cli2无法使用vueclipluginelectronbuilder问题2vuecomponent调用ipcRenderer注意！！！补充：vue-cli2和vue-cli3/4的一些区别参考资料背景最近由于项目上的要求，需要开发一个... 查看详情
vue+element踩坑记录(代码片段)
Vue+Element踩坑 1.获取后台返回的数据，是个数组，循环后展示出来<el-table-column:label="$t(‘common.cardModel.guz‘)"sortable="custom"prop="assetNo"><templateslot-scope="scope"><divv-for="(item,index)inscope. 查看详情
vue踩坑记录:[vuewarn]:$attrsisreadonly.
今天在用element-ui的DatePicker日期选择器的时候，发现每当点击一次这个组件，控制台就会报警告`[Vuewarn]:$attrsisreadonly`，但是也不影响实际操作效果。网上搜了一圈后，发现是使用的vue与vue-tempalte-compiler的版本不一致造成的。当时... 查看详情
vue2.0踩坑记录之组件
...ovidethe"name"option.出现如上错误的原因大致有以下三点（我踩坑只踩到了这四种情况，如果还有之后会更新）1.未能正确的拼好components单词。 这是个低级错误，应该作为第一步排查的可能2.定义子组件时没有在父组 查看详情
uniapp聊天页nvue开发踩坑记录(代码片段)
由于前段时间开发出来的vue版本的聊天页，性能、用户体验等方面十分不尽人意，故开启了新的征途，nvue版本聊天页的开发。痛点一、进入页面保持在最底部这次重构nvue版本的聊天页，使用了标新立异的渲染方... 查看详情
单页应用spa开发最佳实践(代码片段)
...了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import这个配置来引用颜色。示例代码... 查看详情
基于vue2使用vue-awesome-swiper轮播图（踩坑记录）(代码片段)
vue-awesome-swiper使用（踩坑记录）一、vue-awesome-swiper的介绍二、实现效果三、实现步骤（坑多！）1.安装Swiper2.注册swiper组件四、补充说明总结提示：本文介绍是基于vue2.0实现，如果您是vue3.0建议直接去swi... 查看详情
食堂app-项目开发及踩坑记录（10）
------------恢复内容开始------------实现APP中远程访问调用servlet并返回数据， privatevoidsend(){//开启线程，发送请求newThread(newRunnable(){@Overridepublicvoidrun(){HttpURLConnectionconnection=null;BufferedReaderreader=null;tr 查看详情
git踩坑记录
...都统一整理到github上去，慢慢积累和打磨。今天主要整体回顾了建立GitHub仓库的流程和基本的命令gitinit-建立仓库gitcheckout-b<example>-createanewbranchgit 查看详情
uni-app小程序开发踩坑记录
参考技术A最近要从零开发一个跟后台管理系统对接的小程序，因为功能比较复杂，时间短，选择了比较火的uni-app，因为小程序出现的时间较短，各方面并不完善，开发过程中就是不断踩坑的过程，特此记录一小下。uni-app虽然功... 查看详情
vue-cli3.0+elementui踩坑记录
公司的一个后台项目，自己人用，没有兼容性要求。一直兼容ie8的我，是时候放飞自我了。下面是暂时遇到的一些问题。error:Cannotassigntoreadonlyproperty‘exports‘ofobject‘#<Object>‘ import和module.exports不能在一个文件内同时使... 查看详情
vue点击事件（父子层级元素点击时踩坑记录）
<ul> <li@click="fatherClick"> <div@click.stop="childClick"> </div> </li></ul> varvm_target=newVue(el:‘#vm_target‘,data:,methods: /**父元素点击事件**/ fatherClic 查看详情
vue+ts+electron踩坑记录
...化完成后，会生成一个模板项目，我们可以基于模板进行开发。这里要提一句，如果想把原来的项目升级成使用ts的，其实非常简单，使用vue-cli执行vueadd@vue/typescript就可以了，自动帮你处理好依赖问题。而且更方便的是，升级后... 查看详情
vue踩坑记录之变量赋值同步修改
参考技术A一、问题如下在执行上拉加载函数load()中变量list的值发生了变化，因此变量page1的值也跟着发生了变化。这也就造成了一个问题，在执行下拉刷新函数this.onload()时重新请求第一页的数据再也不是原始的初始化数据。也... 查看详情
vue踩坑记录3“errorinrender:"typeerror:cannotreadproperty'0'ofundefined"”渲染
【vue踩坑记录】3、“Errorinrender:"TypeError:Cannotreadproperty‘0‘ofundefined"”渲染错误问题 最后发布:2019-02-0920:20:07首发:2019-02-0920:20:07 原文链接：https://blog.csdn.net/edc3001/article/detail 查看详情
前端学习---移动端vue开发踩坑记
...目和以前自己学习时的一些总结，包括一些通用的移动端开发要注意的事项、vue开发遇到的一些问题。本文的目的是为了在以后的开发中我们可以避免这些坑，提高我们的开发效率。 一、移动端开发特有问题：1、移动端样... 查看详情
vue-cli搭建uniapp项目过程及踩坑记录
首先来到uniapp官网，找到以下页面然后就可以跟着步骤创建项目了……下面我说下我的创建方式第一步：全局安装vue-clinpminstall-g@vue/cli@4第二步：创建正式版uni-appvuecreate-pdcloudio/uni-preset-vue你的项目名第三步... 查看详情
vue-cli搭建uniapp项目过程及踩坑记录
首先来到uniapp官网，找到以下页面然后就可以跟着步骤创建项目了……下面我说下我的创建方式第一步：全局安装vue-clinpminstall-g@vue/cli@4第二步：创建正式版uni-appvuecreate-pdcloudio/uni-preset-vue你的项目名第三步... 查看详情