laravel + vue 基本使用方式

這篇是以 laravel 5.4 之後的環境為主.

laravel 5.x 開始內建對 vue 的支援, 5.5 內建對 react 的支援, 並提供 artisan 指令切換不同的 framework.
而 laravel 5.4 之後,  打包使用的工具從 elixir 改成 mix (webpack) , 所以查資料時, 會看到兩種不同流程的文件, 在於 laravel 版本不同的關係.

基本使用方式

這篇文章 對於 laravel 5.4 裡使用 vue 已經很清楚了, 不過我還是簡單筆記一下重點及遇到的問題

1. 更新 node 到最新版, 並且在 laravel project 下安裝相關 node package

   sudo npm install -g n
   sudo n latest
   npm install

2. add vue file under resources/assets/js/components
   例如新增 login.vue
3. edit resources/assets/js/app.js , 把上面的 vue 檔案加入設定, 例如

   Vue.component('login', require('./components/Login.vue'));

4. 執行指令打包 javascript file 到 public/js/  下
   npm run dev

然後就可以在 html  裡, 以  <login></login> 把 login.vue 的內容引入.

如果要把一些共用的 package 分開來不要打包到一起, 可以修改 webpack.mix.js,  設定要分開打包的 package, 例如

.extract(['lodash','jquery','axios','vue'])

就會額外再產生兩個 js file ,  manifest.js 和 vendor.js

補充上面第 1 點,  在 ubuntu 預設 nodejs 套件版本太舊, 因此在執行 npm install 時, 會產生一些問題.  因為對 node 不熟, 浪費了一些時間處理,  最後發現直接更新到最新版就完全不會有這些問題.  不過用這種方式更新 node 的話, 會安裝在 /usr/local/n/versions/node/  下, 使用 node 時就不是用 ubunut 的 nodejs 套件的檔案了.

較完整應用示例

這篇文章 有更完整的應用示例,  除了 php 的部份外, 還使用了 vue-router 和 vue-axios 兩個 package.

vue-router 可以看 這篇文章 , 中間有的動圖可以很容易看懂 vue-router 的功用, 也是一份寫的很清楚的使用教學.

vue-axios 是  vue 使用 ajax 的 package, 可以看 這篇文章