無法掛載組件：未定義模板或渲染功能？

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 }}

當我嘗試訪問工作列表頁面時，瀏覽器返回以下錯誤消息。

如何在根元素中制作 WorkList？

Answer 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);
                                                                      ^^^^^^^^

Answer 2

您的組件文件“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', {....}
        ....
 

Answer 3

繼Erich 的回答之后，如果您使用 ES6 導入，它將是：

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

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

Answer 4

就我而言，我忘記將動態導入放在箭頭函數中。

錯誤的：

{
    path: "/example/",
    component: import("@/pages/Example"),
}

正確的：

{
    path: "/example/",
    component: () => import("@/pages/Example"),
}

Answer 5

我相信問題是你的 webpack 配置中vue的別名。

查看不同類型的Vue 構建。

嘗試使用vue.min.js或vue.common.js

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