无法挂载组件：未定义模板或渲染功能？答案

【问题标题】：Failed to mount component: template or render function not defined?无法挂载组件：未定义模板或渲染功能？
【发布时间】：2018-07-02 00:18:39
【问题描述】：

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

工作清单.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")

工作清单.pug

extends index.pug

block content
work-list {{ message }}

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

如何在根元素中制作 WorkList？

【问题讨论】：

我的代码网址：github.com/ofleaf/webview

标签： javascript node.js express webpack vue.js

【解决方案1】：

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

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

【讨论】：

这一定是从旧的 Vue 版本中改变的。几个月后我重新开始了一个项目，这解决了这个问题。
如果可以的话，我会给你超过 1 票，谢谢。

【解决方案2】：

您的组件文件“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-模板（类似于上面）

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

【讨论】：

我试过 Vue.component('work-list', { template: (...) });有用。但是 WorkList.vue 中的不起作用。返回相同的错误。 WorkList 元素超出 Root 元素。
您是否正在使用 webpack 构建您的 .vue 组件？我从来没有使用过 Pug 作为预处理器，所以那里可能有问题？
我更改了 app.js 文件。使用 import WorkList from '...';和注册应用程序的组件。有用。感谢您的回复。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我认为问题在于您的 webpack 配置中 vue 的别名。

查看不同类型的Vue builds。

尝试使用vue.min.js 或vue.common.js

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

【讨论】：