使用Vue遇到的一些问题汇总
一、[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
1 原因
- vue 有两种形式的代码 compiler（模板）模式和 runtime 模式（运行时），vue 模块的 package.json 的 main 字段默认为 runtime 模式， 指向了 dist/vue.runtime.common.js 位置。这是 vue 升级到 2.0 之后就有的特点。
- 在原本的 webpack 配置文件里有个别名配置
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
}
}
2 解决方法
- 在 vue.config.js 文件里加上 webpack 的如下配置即可
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
- 引用 vue 时，直接写成如下即可
import Vue from 'vue/dist/vue.esm.js'
二、Cannot set property ‘render’ of undefined
1 原因
- 本项目中有 new vue 了，需要改为用 export default {}
2 解决方法
- 将 new vue 写法换成 export default
3 补充
- 至于我的项目无法使用 new vue 是因为在 main.js 中有引入了 app.vue，所以必须要使用 export default 形式暴露出去的。
- 一个 vue-cli 项目只能有一个 new Vue() 实例，也就是 main.js 中创建的，其他的组件 vue 就得用 export default，再通过将组件 vue 引入 app.vue 中就可以实现各种功能了。
- 关于 $mount 手动挂载
- 当 Vue 实例没有 el 属性时，则该实例尚没有挂载到某个 dom 中。
- 假如需要延迟挂载，可以在之后手动调用 vm.$mount() 方法来挂载。
- 关于 render
- createElement 函数是用来生成 HTML DOM 元素的，也就是 Hyperscript，这样作者才把 createElement 简写成 h。
三、option “el” can only be used during instance creation with the new keyword.
1 原因
- 在使用 export 就不能在定义 el: 来指向 template 中的顶层 id
- el 指向指向 template 中的顶层 id 只能是在 var vm = new Vue 里面
- 不能在 export default 里面！
四、Elements in iteration expect to have ‘v-bind:key’ directives.
1 原因
- Vue 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 是必须的。
- 注意上面 key 值不要用对象或是数组作为 key，用 string 或 number 作为 key，否则报错：[Vue warn] Avoid using non-primitive value as key, use string/number value instead。
- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
- 理想的 key 值是每项都有的且唯一的 id。
- 这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以需要用 v-bind 来绑定动态值。
Original: https://www.cnblogs.com/sevenkiki/p/15467219.html
Author: 琪有此理
Title: Vue 小白踩坑之路
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/567452/
转载文章受原作者版权保护。转载请注明原作者出处！