无法挂载组件：模板或渲染函数未定义？

Question

我正在使用node.js，express，pug，vue.js创建网站。我有一个关于Vue.js的问题

app.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

<script>
  export default {
    name: 'WorkList',
    data: function () {
      return {
        message: 'WorkList Page'
      }
    }
  }
</script>

index.pug

(HTML Code..)
body
    #app.container
        h1 {{ message}}
        .row
            block content
        a(href="/worklist") Go to worklist
  script(src="bundle.js")

worklist.pug

extends index.pug

block content
work-list {{ message }}

当我尝试访问工作列表页面时，浏览器返回以下错误消息。

如何在Root元素中创建WorkList？

Answer 1

您的组件文件'WorkList.vue'需要定义模板。构建'.vue'组件的最直接方法有三个部分。

<template>
   //template code goes here.
</template>

<script>
   // vue javascript here
</script>

<style>
   // applicable styles here
</style>

您的组件需要<template>标记。

还有其他方法可以定义模板。 https://vuejs.org/v2/guide/render-function.html

定义组件时

Vue.component('my-component', {
    template: `<div> markup here</div>`,
    data(){
      ...
    }
});

X-Templates（与上述类似）

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', {....}
        ....

Answer 2

I believe the problem is the alias for vue in your webpack config.

Check out the different types of Vue builds.

Try using vue.min.js or vue.common.js

//webpack.config.js
...
alias: {
  'vue$': 'vue/dist/vue.common.js'
},
...

Answer 3

即使在Vue单个文件组件中定义了<template></template> ，也可能会发生这种情况。在您的app.js中全局注册组件时，除了require('/path/to/your/Component.vue')作为Vue.component()的第二个参数外，您还必须指定.default：

Vue.component('work-list', require('../views/components/WorkList.vue').default);
                                                                      ^^^^^^^^

Answer 4

从Erich's answer开始，如果您使用的是ES6导入，则为：

import WorkList from '../views/components/WorkList'; // .vue is extension not required

Vue.component('work-list', WorkList);