Javascript 编译模板时出错：组件模板需要根元素，而不仅仅是vue.js中带有laravel的文本_Javascript_Php_Laravel_Vue.js_Npm

Javascript 编译模板时出错：组件模板需要根元素，而不仅仅是vue.js中带有laravel的文本

javascript php laravel vue.js npm

Javascript 编译模板时出错：组件模板需要根元素，而不仅仅是vue.js中带有laravel的文本,javascript,php,laravel,vue.js,npm,Javascript,Php,Laravel,Vue.js,Npm,我是laravel的Vuejs学习者，我用vue.js前端在laravel创建了一个新项目。但在运行命令php artisan serve之后，当我在webbrowser上运行项目时。输出为空。我检查了网络控制台，还有一个输出显示在示例组件中为空。请帮我找出我的错误 web.php Route::get('/', function () { return view('welcome'); }); 欢迎使用.blade.php <html la

我是laravel的Vuejs学习者，我用vue.js前端在laravel创建了一个新项目。但在运行命令php artisan serve之后，当我在webbrowser上运行项目时。输出为空。我检查了网络控制台，还有一个输出显示在示例组件中为空。请帮我找出我的错误

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>

Vue.component（'example-component'{
模板：`这是主页`
})

必须将模板内容包装在父元素中，例如

。如果不是，Vue将显示一个错误，说明每个组件必须有一个根元素


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


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