Laravel 中什么都没有显示

Question

我想制作一个使用 laravel 框架和 vue.js 的 web 应用程序，在我进行了必要的设置并添加了框架之后，链接了两个文件，并运行浏览器注意显示。

家.vue

<template>
    <div>

        <h1>zakaria sassi</h1>
    </div>
</template>

欢迎.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">


    </head>
    <body>
       <div id="app">
       <home></home>
       </div>

       <script src="{{ asset('js/app.js') }}" defer ></script>
    </body>
</html>

应用程序.js

require('./bootstrap');

window.Vue = require('vue');


Vue.component(
'home',
  require('./components/home.vue'));


const app = new Vue({
  el: '#app',
  router,
});

webpack.mix.js

const mix = require('laravel-mix');


mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');