Laravel 建置 Vue.js 和 Vue Router 的 SPA 網站

2021-09-11 腳印網頁資訊設計

在 Ubuntu Server 環境使用 Laravel 的 laravel/ui 套件，建置 Laravel 和 Vue.js 連動 Vue Router，並將 Laravel 所有 routes 指向主要 Component，來完成 Laravel、Vue.js 和 Vue Route 的 SPA 網站。

安裝

laravel/ui 套件

composer require laravel/ui

npm

sudo apt indatll npm

ui 和 Vue.js 套件

這個 laravel/ui 套件有一些有用的 artisan 指令，它能自動建置開始使用 Vue 所需的一切。

php artisan ui vue

Vue Route

安裝 Vue.js 路由套件 Vue Route：

sudo npm install vue-router --save-dev

新版本的 Node.js

因 Node.js 會有版本須 >= 12 以上限制，所以這裡安裝較新版本的 Node.js LTS (v14.x) ：

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Max 額外的依賴項

安裝添加依賴項目，並編譯：

npm run dev
npm install && npm run dev

Laravel Vue.js 設定

Vue 的結構就是由各個 Components 組成，因此一開始要在該目錄下建立所需頁面的 Component。

在 resources/js/components/ 建立一個頁面 Home.vue (直接複製原提供的 ExampleComponent.vue 修改即可)：

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Home</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('Component mounted.')
  }
}
</script>

新增 Vue.js 的路由 Vue Route

Component Home.vue 建立完成後，就可以設定 Vue.Router 了，新增 resources/js/router.js：

import Vue from 'vue';
import Router from 'vue-router';

// 引用頁面的 Component
import Home from './components/Home.vue';

// 使用 Vue Router
Vue.use(Router);

// Route 設定
export const routes = [
  { path: '/home', component: Home, name: 'home' },
];

// 建立 Vue Router instance
const router = new Router({
  mode: 'history',
  routes
});

export default router;

Vue 主要頁面與 Vue Route 連動

修改 resources/js/app.js，主要是新增 7, 8, 36 行。

建立新的 Vue.js component resources/js/components/Home.vue 檔案後，需要向 Vue 註冊它 (第 26 行)。

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import Vue from 'vue';
import router from './router.js';

require('./bootstrap');

window.Vue = require('vue').default;

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

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

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
  el: '#app',
  router
});

Laravel 和 Vue 連動

Vue 都設定完成後，要在 Laravel Blade 頁面引入 Vue.js 物件，新增 resources/views/index.blade.php，作為預設首頁

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>
  </head>
  <body>
    <div id="app">
      <div class="links">
        <!-- 建立 Vue Router 連結-->
        <router-link to="/home">Home</router-link>
      </div>

      <!-- Vue Router 代入的內容 -->
      <router-view></router-view>
    </div> 
    
    <!-- 引入 Vue app -->
    <script src="/js/app.js"></script>
  </body>
</html>

Laravel routes 指向設定

將 Laravel 所有 routes 都指向上述建立的 index.blade.php，設定 routes/web.php：

// 將除了 api prefix 的 request 都導向 index.blade.php
Route::get('/{path}', function () {
    return view('index');
})->where('path', '^((?!api).)*$');

測試結果

注意是否己經執行了：

npm install

接著只要執行此指令，即可在修改同時即時編譯，並且也能與 Chrome Vue Devtools 連動：

npm run watch

參考

Vue.js Laravel

本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣授權條款授權.

腳印網頁資訊設計

SEO 行銷導向網頁設計