# Laravel 11 + vue.js 前後端分離實作練習 # 後端專案Laravel ## 新增Laravel 專案 ```php= laravel new projectName ``` --- ## 安裝cors ```php= php artisan config:publish cors ``` ## 設定cors ### 檔案位於config/cors.php #### 檔案內配置如下 ![image](https://hackmd.io/_uploads/ryLUScTQkg.png) --- ## 建立api.php ```php= php artisan install:api ``` ## 設定api.php ### 檔案位於routes/api.php #### 檔案內配置如下 ![image](https://hackmd.io/_uploads/BkrleiaXkl.png) --- ## 建立controller ```php= php artisan make:controller api/ExampleController ``` ## 設定controller ### 檔案位於app/Http/Controllers/api/ExampleController.php ### 撰寫測試api ![image](https://hackmd.io/_uploads/rkFbeiTXkx.png) --- # 前端專案 Vue.js ```powershell= npm create vite@latest projectName --template vue ``` ## 安裝node.js ```powershell= npm install ``` ## 安裝axios處理api請求(看個人) ```powershell= npm install axios ``` ## 連接laravel 後端api ### 檔案位於src/App.vue #### 檔案內配置如下 ![image](https://hackmd.io/_uploads/SyQG-s671x.png) ## 分別於前、後端專案開啟各自的伺服器 ### 後端Laravel ``` php artisan serve ``` ### 前端Vue ``` npm run dev ``` ## 查看結果 http://localhost:5173/