Vue.js 饿了么开发过程中的错误整理(更新中……)
此错误解决方案基本上来自****,我只是配合我的问题做个整理,方便下次查找,侵权删
一、错误一
原因:
./表示你自己当前加载当前目录下的router文件,但是我们没有这个文件,所以‘./router’会报错;
‘vue-router’表示这是一个模块,这是webpack处理的模块,webpack会从node_modules里面去加载这个npm包
解决:import VueRouter from './router' 的路径改为‘vue-router’,问题即解除
二、错误二
原因:2.0已经没有map了,
解决:使用npm install [email protected] 命令兼容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