laravel掛載vue-compoent範例

 1,449 total views,  2 views today

laravel 5.8開始要測試vue 設定他的範例檔時，看了官方文件與很多部落格文章，幾乎都是抄來抄去的內容，但是一致性的都跑失敗。最後，終於在國外網站找到解法。

首先編輯 /resources/app.js

一般看到的程式碼都是這樣，如果這樣抄，都是掛載不起來的。

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

正確的寫法

import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('ExampleComponent', ExampleComponent);

接下來建立一個blade來顯示範例畫面，/resources/view/example.blade.php

<div id="app">
	<example-component></example-component>
</div>
<script>
new Vue({
		el: "#app"
	});
</script>

這樣就能成功顯示在網頁上了。