Vue 구성 요소가 표시되지 않음 : Laravel5.4 및 Vue.js2

Question

Vue.js를 처음 사용하고 L5.4와 함께 사용합니다. 내 프로젝트에서보기 .I 실행 NPM 실행 표시되지 않습니다 watchand의 제대로

이

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

upload.blade.php

/** 
* 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' 
// }); 

을 app.js 작업

Upload.vue

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 56,746,297,649,725,228,743,210

는

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] 

나는 흰색 빈 페이지를 받고 있지 않다 내 구성 요소가

을 표시되지 않는 이유 console.what에 오류가 여기 happenig되지 않습니다 다음 제공

Answer 1

나는 이렇게 사용한다.

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

은 내가 랩 사업부를 제거하면, 그것은 작동하지 콘솔에 내가

[Vue warn]: Cannot find element: #app 

희망

을 도울 수 볼 수 있습니다 일