編譯模板時出錯：組件模板需要根元素，而不僅僅是 vue.js 和 laravel 中的文本

Question

我是 laravel 的 Vuejs 學習者，我在 laravel 中創建了一個新項目，前端為 vue.js。 但是在運行命令 php artisan serve 之后，當我在網絡瀏覽器上運行項目時。 output 為空。 我檢查了網絡控制台，示例組件中也顯示 output 為空白。 請幫我找出我的錯誤。

web.php


    Route::get('/', function () {
        return view('welcome');
    });

歡迎.blade.php


    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <title>Laravel Vue</title>
    
            <!-- Fonts -->
            <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        </head>
        <body>
            <div id="app">
                <example-component> </example-component>
                <script src="{{ asset('js/app.js') }}"></script>
            </div>
        </body>
    </html>

ExampleComponent.vue


    <script>
    
    Vue.component('example-component', {
     
      template: `This is the homepage`
    })
    
    new Vue({
         el: '#app'
          })
    </script>

應用程序.js


    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    
    alert('Alert');
    Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Answer 1

Vue.component('example-component', {
  template: `<div id="app">This is the homepage</div>`
})

您必須將模板內容包裝在父元素中，例如<div> </div> 。 如果不是，Vue 將顯示錯誤，說明每個組件都必須有一個根元素。

編譯模板時出錯：組件模板需要根元素，而不僅僅是 vue.js 和 laravel 中的文本

問題描述

1 個解決方案

解決方案1
4 已采納 2020-08-31 12:41:42

編譯模板時出錯：組件模板需要根元素，而不僅僅是 vue.js 和 laravel 中的文本

問題描述

1 個解決方案

解決方案1 4 已采納 2020-08-31 12:41:42

解決方案1
4 已采納 2020-08-31 12:41:42