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

Question

I am new to Vue.js and using it with L5,4. In my project view is not displayed .i run npm run watchand its working properly

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

Upload.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">UploadComponent</div>

                    <div class="panel-body">
                      upload...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

package.json

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.3",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

npm run watch gives following

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]

I am not getting white blank page and no error in console.what is happenig here,why my component is not shown

Answer 1

I use like this

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

it worked,if i remove wrap div,it not work,in console i can see

[Vue warn]: Cannot find element: #app 

hope can help