[英]Failed to mount component: template or render function not defined?
I am creating website using node.js, express, pug, vue.js.我正在使用 node.js、express、pug、vue.js 创建网站。 I have one problem regarding Vue.js
我有一个关于 Vue.js 的问题
app.js应用程序.js
window.Vue = require('vue');
Vue.component('work-list', require('../views/components/WorkList.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'Welcome'
}
});
WorkList.vue工作清单.vue
<script>
export default {
name: 'WorkList',
data: function () {
return {
message: 'WorkList Page'
}
}
}
</script>
index.pug指数.pug
(HTML Code..)
body
#app.container
h1 {{ message}}
.row
block content
a(href="/worklist") Go to worklist
script(src="bundle.js")
worklist.pug工作清单.pug
extends index.pug
block content
work-list {{ message }}
When I try to access worklist page, browser is returning following error message.当我尝试访问工作列表页面时,浏览器返回以下错误消息。
How can I make WorkList in Root element?如何在根元素中制作 WorkList?
This might also occur even when a <template></template>
is defined in your Vue single file component.即使在 Vue 单文件组件中定义了
<template></template>
也可能发生这种情况。 In addition to require('/path/to/your/Component.vue')
as the second parameter to Vue.component()
when registering the component globally in your app.js, you also have to specify .default
:在 app.js 中全局注册组件时,除了
require('/path/to/your/Component.vue')
作为Vue.component()
的第二个参数之外,还必须指定.default
:
Vue.component('work-list', require('../views/components/WorkList.vue').default);
^^^^^^^^
Your component file 'WorkList.vue' needs a template defined.您的组件文件“WorkList.vue”需要定义一个模板。 The most straight forward way to construct a '.vue' component is with three sections.
构建“.vue”组件最直接的方法是使用三个部分。
<template>
//template code goes here.
</template>
<script>
// vue javascript here
</script>
<style>
// applicable styles here
</style>
Your component is expecting the <template>
markup.您的组件需要
<template>
标记。
There are other ways to define the template as well.还有其他定义模板的方法。 https://v2.vuejs.org/v2/guide/render-function.html
https://v2.vuejs.org/v2/guide/render-function.html
When defining your component定义组件时
Vue.component('my-component', {
template: `<div> markup here</div>`,
data(){
...
}
});
X-Templates (similar to above) 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>
Using the render function使用渲染功能
export default {
data() {
...
}
render(createElement) {
return createElement(
'div', {....}
....
Following on from Erich's answer , if you are using ES6 imports it would be:继Erich 的回答之后,如果您使用 ES6 导入,它将是:
import WorkList from '../views/components/WorkList'; // .vue is extension not required
Vue.component('work-list', WorkList);
In my case, I forgot to put my dynamic import inside an arrow function.就我而言,我忘记将动态导入放在箭头函数中。
Wrong:错误的:
{
path: "/example/",
component: import("@/pages/Example"),
}
Correct:正确的:
{
path: "/example/",
component: () => import("@/pages/Example"),
}
I believe the problem is the alias for vue
in your webpack config.我相信问题是你的 webpack 配置中
vue
的别名。
Check out the different types of Vue builds .查看不同类型的Vue 构建。
Try using vue.min.js
or vue.common.js
尝试使用
vue.min.js
或vue.common.js
//webpack.config.js
...
alias: {
'vue$': 'vue/dist/vue.common.js'
},
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.