Zi 字媒體

Building a Vue SPA with Laravel PHP：7.2 Laravel：7.2 由於 Laravel 可以結合 Vue 使用，當然也可以在 Laravel 上建立 SPA（Single Page Application）。 JavaScript & CSS Scaffolding 在 Laravel 7.2 中，Laravel 已經將前端框架的套件拆出去，因此像 Vue、React、Bootstrap 等套件在預設的 package.json 中是沒有的。 如果要使用，就必須再透過 composer require laravel/ui。 composer require laravel/ui 安裝完成以後，就可以透過 Artisan 來安裝你想要的套件。 ; package.json 新增套件，resources/js/app.js 也會新增基本的 init 設定 php artisan ui bootstrap php artisan ui vue php artisan ui react ; 加入 auth 參數的話，會自動產生登入頁面 php artisan ui bootstrap --auth php artisan ui vue --auth php artisan ui react --auth 由於這篇討論的是 Vue，因此只要安裝 Vue 的就可以了。 Router 要使用 SPA 架構，就需要安裝 Vue Router 來控制 routing。 安裝 Vue Router npm install vue-router --save-dev Single Page Application 當套件備齊以後，要建立一個完整 SPA 有幾個地方要調整。 Vue Page Components Vue Router Setting Vue App Init Laravel Blade Setting Laravel Route Setting Vue Page Components Vue 的結構就是由各個 Components 組成，因此一開始要建立各個頁面的 Component。 我們可以在 resources/js/components 當中先建立 Home 和 Category 頁面。 Home.vue（Category 可以比照辦理） Home export default { mounted() { console.log('Component mounted.') } } Vue Router Setting 在頁面的 Component 完成以後，可以開始設定 Vue Router。 可以在 resources/js 下建立一支 router.js 的 Component。 router.js import Vue from 'vue'; import Router from 'vue-router'; // 引用頁面的 Component import home from './components/Home.vue'; import category from './components/Category.vue'; // 使用 Vue Router Vue.use(Router); // Route 設定 export const routes = [ { path: '/home', component: home, name:'home'}, { path: '/category', component: category, name: 'category'}, { path: '*', redirect: '/home' }, ]; // 建立 Vue Router instance const router = new Router({ mode: 'history', routes }); export default router; Vue App Init 在頁面及 route 都準備好之後，修改 resources/js/app.js，將上一步的 Router Component 代入。 app.js import Vue from 'vue'; import router from './router.js'; export default new Vue({ el: '#app', router }); Laravel Blade Setting Vue 的部份都設定完成以後，要在 Laravel Blade 的頁面中引入 Vue 物件。 Notice： 範例使用預設的 welcome.blade.php resources/views/welcome.blade.php ... Home Category ... Laravel Route Setting 最後一個步驟，就是將 Laravel 所有 route 都指向 welcome.blade.php。 routes/web.php // 將除了 api prefix 的 request 都導向 welcome.blade.php Route::get('/{path}', function () { return view('welcome'); })->where('path', '^((?!api).)*$'); Final Check 注意一下是否已經做了 npm install，接著只要下 npm run watch 進行編譯後，就可以測試是否成功了。 Categories: LaravelVue Tags: LaravelVue 分類 Android AngularJS API Blueprint Chrome Database MySQL DataStructure Docker Editor Vim Firefox Git GitLab Google API Hadoop HTTP Language Go Java JavaScript jQuery jQueryChart Node.js Vue Vue-CLI PHP Laravel Lumen ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋關鍵字: