[Vue警告]：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません。エラーが

Question

私はVueのアプリを構築しようとしているが、私は、コンソール上でこのエラーを取得しています：

[Vueが警告]：テンプレートまたは関数定義されていないのレンダリング：コンポーネントのマウントに失敗しました。

header.vue

<header> 
    <div class="page-logo">Foo.com</div> 
</header> 
<nav> 
    <ul class="nav"> 
     <li>My Account</li> 
     <li>Log In</li> 
     <li>Log Out</li> 
     <li>Sign Up</li> 
    </ul> 
</nav> 
</header> 

これは私のapp.js：

は、これは私のコードです

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import $ from 'jquery' 
Vue.use(VueRouter) 

var App = (function (App) { 
    App.appComp = { 
     header : Vue.component('mainMenu', require('./components/app/header.vue')) 
    }; 
    const router = new VueRouter({ 
    routes: [ 
     { 
      path: '/', 
      components: { 
      header: App.appComp.header, 
      } 
     } 
     ] 
    }); 
    App.app = new Vue({ 
     router 
    }).$mount('#app'); 
    return App; 
})(App || {}); 

そして、私はlaravelミックスでこれを構築しようとしています。 コンソールでこのエラーが発生します。

[Vue警告]：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません。 --->で見つかった は/opt/lampp/htdocs/gif/resources/assets/js/components/app/header.vue

で私はグーグルで検索し、私はこの答えが見つかりました：Vue template or render function not defined yet I am using neither?

を

私はmixの定義をオーバーライドしようとしました。私がやった：

仕事なので、私はそこにこの行い

WebPACKの設定ファイルを変更しようとしませんでした

mix.webpackConfig({ 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 
     } 
    } 
}); 

：私はESMと共通置き換えることを試みた

module.exports.resolve = { 
    extensions: ['*', '.js', '.jsx', '.vue'], 

    alias: { 
     'vue$': 'vue/dist/vue.common.js' 
    } 
}; 

を、助けてくれなかった。

他に何をすべきですか？

Answer 1

1つのファイルコンポーネント内のHTMLは、templateタグで囲まれている必要があります。

<template> 
    <div> 
    <header> 
     <div class="page-logo">Foo.com</div> 
    </header> 
    <nav> 
     <ul class="nav"> 
     <li>My Account</li> 
     <li>Log In</li> 
     <li>Log Out</li> 
     <li>Sign Up</li> 
     </ul> 
    </nav> 
    </div> 
<template>