Javascript 未显示Vue组件：Laravel5.4和Vue.js2

我是Vue.js的新手，在L5,4中使用它。在我的项目视图中没有显示。我运行了npm run WATCH，它工作正常

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
 //Vue.component('test', require('./components/Test.vue'));
Vue.component('upload', require('./components/Upload.vue'));

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

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

upload.blade.php

@extends('layouts.app')
@section('content')
<upload></upload>
@endsection

npm运行观察

给出以下信息

E:\xampp\htdocs\l54>npm run watch

> @ watch E:\xampp\htdocs\l54
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active
Webpack is watching the files…

 95% emitting

 DONE  Compiled successfully in 7126ms                                                                        7:53:46 AM

                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                               /js/app.js   1.18 MB       0  [emitted]  [big]  /js/app
                                                             /css/app.css    683 kB       0  [emitted]  [big]  /js/app
                                                        mix-manifest.json  66 bytes          [emitted]

控制台中没有白色空白页，也没有错误。这里发生了什么，为什么我的组件没有显示出来

我这样使用

             <div id="app">
              <example></example>
            </div>

希望能有所帮助

E:\xampp\htdocs\l54>npm run watch

> @ watch E:\xampp\htdocs\l54
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active
Webpack is watching the files…

 95% emitting

 DONE  Compiled successfully in 7126ms                                                                        7:53:46 AM

                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]
                                                               /js/app.js   1.18 MB       0  [emitted]  [big]  /js/app
                                                             /css/app.css    683 kB       0  [emitted]  [big]  /js/app
                                                        mix-manifest.json  66 bytes          [emitted]

             <div id="app">
              <example></example>
            </div>

[Vue warn]: Cannot find element: #app