![](/img/trans.png)
[英]Laravel - [Vue warn]: Failed to mount component: template or render function not defined
[英]Failed to mount component: template or render function not defined?
我正在使用 node.js、express、pug、vue.js 创建网站。 我有一个关于 Vue.js 的问题
应用程序.js
window.Vue = require('vue');
Vue.component('work-list', require('../views/components/WorkList.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'Welcome'
}
});
工作清单.vue
<script>
export default {
name: 'WorkList',
data: function () {
return {
message: 'WorkList Page'
}
}
}
</script>
指数.pug
(HTML Code..)
body
#app.container
h1 {{ message}}
.row
block content
a(href="/worklist") Go to worklist
script(src="bundle.js")
工作清单.pug
extends index.pug
block content
work-list {{ message }}
当我尝试访问工作列表页面时,浏览器返回以下错误消息。
如何在根元素中制作 WorkList?
即使在 Vue 单文件组件中定义了<template></template>
也可能发生这种情况。 在 app.js 中全局注册组件时,除了require('/path/to/your/Component.vue')
作为Vue.component()
的第二个参数之外,还必须指定.default
:
Vue.component('work-list', require('../views/components/WorkList.vue').default);
^^^^^^^^
您的组件文件“WorkList.vue”需要定义一个模板。 构建“.vue”组件最直接的方法是使用三个部分。
<template>
//template code goes here.
</template>
<script>
// vue javascript here
</script>
<style>
// applicable styles here
</style>
您的组件需要<template>
标记。
还有其他定义模板的方法。 https://v2.vuejs.org/v2/guide/render-function.html
定义组件时
Vue.component('my-component', {
template: `<div> markup here</div>`,
data(){
...
}
});
X-模板(类似于上面)
Vue.component('my-component', {
template: `#someElementId`,
....
//then in a separate component.js file
<script type="text/x-template" id="someElementId">
<div> markup here </div>
</script>
使用渲染功能
export default {
data() {
...
}
render(createElement) {
return createElement(
'div', {....}
....
继Erich 的回答之后,如果您使用 ES6 导入,它将是:
import WorkList from '../views/components/WorkList'; // .vue is extension not required
Vue.component('work-list', WorkList);
就我而言,我忘记将动态导入放在箭头函数中。
错误的:
{
path: "/example/",
component: import("@/pages/Example"),
}
正确的:
{
path: "/example/",
component: () => import("@/pages/Example"),
}
我相信问题是你的 webpack 配置中vue
的别名。
查看不同类型的Vue 构建。
尝试使用vue.min.js
或vue.common.js
//webpack.config.js
...
alias: {
'vue$': 'vue/dist/vue.common.js'
},
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.