2017-09-15 132 views
-2

我已經使用來構建我改變welcome.blade的例子Vue的文件編制資產就跑laravel 5.5和VUE JS不工作開箱

NPM隨後安裝由NPM運行看

<body> 
    <div id="app"> 
     <Example></Example> 
    </div> 

    <script href="{{URL::asset('js/app.js')}}" charset="utf-8"></script> 
    </body> 
</html> 

,並安裝Vue公司開發工具並沒有什麼正在觀看所有

Example.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">Example Component</div> 

        <div class="panel-body"> 
         I'm an example component! 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

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

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

window.Vue = require('vue'); 

/** 
* 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('example', require('./components/Example.vue')); 

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

What I get on page load

+0

控制檯說什麼?你沒有提供足夠的信息來幫助你。 –

+0

控制檯是空白的,屏幕也是空白的,根本沒有任何負載,我已經清空緩存和硬重新加載 – GrahamMorbyDojo

+0

我有與Vue相同的問題,並在控制檯中,我可以看到錯誤「[Vue提醒]:無法安裝組件:模板或呈現功能沒有定義 在 --->找到 「 –

回答

0

你只需要去</body>標籤之前添加 <script src="{{ mix('js/app.js') }}"></script>

以這種方式添加包含Vue庫,組件等等的混合。

我希望這會有所幫助。