天天看點

【Laravel 5.5 + Vue 2.x + Element 2.x】使用Vue.js配合Laravel開發

然後在根目錄下的package.json檔案中将vue的版本改成你希望使用的版本(Laravel 5.5 預設使用2.1.10),然後執行npm install.

也可以,直接npm install, 然後再運作npm install vue安裝最新的穩定版vue.

Laravel中預設有vue example files。

/js                          這個目錄js的源碼目錄,Vue的代碼都放在這裡。

/js/components      這個目錄下存放的是Vue單檔案元件。

js/bootstrap.js        所有的js依賴都寫在這個檔案裡。

js/app.js                 這個檔案是Vue的入口檔案。

将welcome.blade.php内容改為:

并将app.js中

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

改為

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

(也可以隻改welcome.blade.php中的example,我這是測試改了example後是否也可行)

指令行中執行npm run watch, 就會編譯css 和js到public中,然後打開浏覽器可以看到如下頁面:

vue的使用沒有問題的話,

接下來安裝Element UI, 現在已經有2.0 alpha 版了。

npm i element-ui@next -S