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

Question

我正在使用 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 }}

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

如何在 Root 元素中制作 WorkList？

Answer 1

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

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