Ste*_*n-v 20 javascript vue.js vue-component vuejs2
这是我的主要javascript文件:
import Vue from 'vue'
new Vue({
el: '#app'
});
我的HTML文件:
<body>
<div id="app"></div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
运行时构建的Vue.js的Webpack配置:
alias: {
'vue$': 'vue/dist/vue.runtime.common.js'
}
我仍然得到这个众所周知的错误:
[Vue警告]:无法安装组件:模板或渲染函数未定义.(在根实例中找到)
为什么我在装载Vue的#app div中没有一个东西,我仍然得到渲染/模板错误？它说,found in root但没有任何东西可以找到,因为它甚至没有任何内容？
如果这不起作用我怎么想装？
编辑:
我试过这样似乎有用:
new Vue(App).$mount('#app');
这是有道理的,因为使用该el属性意味着您正在"扫描"任何组件的dom元素,并且它没用,因为运行时构建没有编译器.
仍然是一个非常奇怪的错误消息,特别是当我把整个#app div清空时.
希望有人可以证实我的想法.
小智 53
如果你曾经像这样调用一个组件：
Vue.component('dashboard', require('./components/Dashboard.vue'));
我想当您更新到 laravel mix 5.0 或其他库时会出现该问题，因此您必须放置 .default。如下所示：
Vue.component('dashboard', require('./components/Dashboard.vue').default);
我解决了同样的问题。
Asq*_*qan 14
就我而言，我将组件（在路由器中）导入为：
import bsw from 'common-mod/src/components/webcommon/webcommon'
如果我将其更改为
import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
kis*_*ana 11
我以前的代码是
Vue.component('message', require('./components/message.vue'));
当我遇到这样的错误时，我只是添加.default它并且它起作用了..
Vue.component('message', require('./components/message.vue').default);
小智 10
如果其他人不断得到同样的错误.只需在组件模板中添加一个额外的div.
正如文件所说:
组件模板应该只包含一个根元素
看看这个简单的例子:
import yourComponent from '{path to component}'
export default {
components: {
yourComponent
},
}
// Child component
<template>
<div> This is the one! </div>
</template>
小智 8
从 Laravel Mix 3 到 Laravel 4 的更新可能会影响所有组件的答案。
有关更多详细信息，请参阅https://laravel-mix.com/docs/4.0/upgrade。
让'example-component'是示例组件，其地址是'./components/ExampleComponent.vue'。
Laravel 3：
Vue.component('example-component', require('./components/ExampleComponent.vue'));
拉维尔4：
变化.default是添加了a 。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
就我而言，我使用的是默认导入：
import VueAutosuggest from 'vue-autosuggest';
使用命名导入修复它：
import {VueAutosuggest} from 'vue-autosuggest';
就我而言，由于从Laravel Mix版本2升级到了5，我遇到了错误。
在Laravel Mix版本2中，按如下所示导入vue组件：
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
在Laravel Mix版本5中，必须按如下所示导入组件：
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
这是文档：https : //laravel-mix.com/docs/5.0/upgrade
更好的是，为了提高应用程序的性能，您可以按以下方式延迟加载组件：
Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));
小智 6
这样的事情应该可以解决问题..
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default);
作为所有帖子的摘要
这个错误：
[Vue 警告]：无法挂载组件：未定义模板或渲染函数。
你是因为某个问题阻止了你的组件被安装。
这可能是由许多不同的问题引起的，您可以从此处的不同帖子中看到。彻底调试您的组件，并注意可能未正确完成并可能阻止安装的所有内容。
当我的组件文件未正确编码时，我收到错误...
| 归档时间： |
|
| 查看次数： |
46312 次 |
| 最近记录： |