Vue.js 饿了么开发过程中的错误整理（更新中……）

此错误解决方案基本上来自CSDN，我只是配合我的问题做个整理，方便下次查找，侵权删

一、错误一

原因:

  ./表示你自己当前加载当前目录下的router文件，但是我们没有这个文件，所以‘./router’会报错；

‘vue-router’表示这是一个模块，这是webpack处理的模块，webpack会从node_modules里面去加载这个npm包

 

解决：import VueRouter from './router' 的路径改为‘vue-router’,问题即解除

 

二、错误二

原因：2.0已经没有map了，

解决：使用npm install vue-router@0.7.13 命令兼容1.0版本vue

三、错误三

原因：版本问题，由于vue2删除了vue1的内部指令，而vue－router1.x依赖vue的一个内部指令

解决：

1.打开package.json  将"dependencies"中的   "vue-router"版本改为："^2.2.0"

2.npm install 

3.在App.vue中

        <a v-link="{path:'/goods'}"></a>

改为 <router-link to="/goods">商品</router-link> 

如果上述解决办法不能解决问题，你还可以试试这个

我尝试了上面的解决办法，component的报错是解决了，但是错误二map问题又出现了，这是因为vue-router的版本冲突问题，踩了很久的坑之后，我把vue-router改成了‘2.2.0’版本的

1.在package.json中把vue-router的版本更改成“^2.2.0”

2.npm install 安装

3.配置路由：

4.a标签依旧要改

5.npm run dev运行项目

三、错误三

原因：Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。

解决：

VScode:文件->首选项->设置->搜索vetur->找到vetur.validation.template->改为false,重启VScode

四、错误四

原因：vue2.0舍弃了$index

解决：把$index改为index

五、错误五

tansition动画过渡效果不显示的问题

原因：Vue1.0和Vue2.0中tansition的设置不一样

解决：

六、问题六：Cannot read property 'foodsWrapper' of undefined

解决：改变v-el使用ref

七、问题七Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value（避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。而是根据prop的值使用数据或计算属性。）

解决办法：

food.vue

子组件数据改变之后传给父组件

ratingselect.vue

在子组件声明一个中间变量typeSelect,contentOnly，避免直接改变父组件传递过来的selectType,onlyContent

八、问题八，引入BScroll后，使用ready初始化无反应

在vue2.0中已经不支持ready钩子函数了，使用新的 mounted 钩子函数替代。应该注意的是，使用 mounted 并不能保证钩子函数中的 this.$el 在 document 中。为此还应该引入 Vue.nextTick/vm.$nextTick。

更改：

seller.vue