使用 Laravel 10 與 Vue 3 + Vuetify 建立現代化 Web 應用

php laravel10 vue3 vuetify vue-router

answer212224 2024-09-28 11:56:13 ‧ 111 瀏覽

分享至

在當今的 Web 開發中，Laravel 和 Vue.js 是兩個非常受歡迎的框架。Laravel 提供了強大的後端功能，而 Vue.js 則使得前端開發變得靈活且高效。結合 Vuetify，您可以快速構建美觀的用戶界面。本文將介紹如何使用 Laravel 10、Vue 3 和 Vuetify 建立一個現代化的單頁應用（SPA）。

環境準備

要在開發環境中使用 Laravel 10，您需要安裝幾個必要的工具和依賴。以下是環境準備的詳細步驟：

安裝 PHP
Laravel 10 需要 PHP 8.1 或更高版本。您可以從 PHP 官方網站下載並安裝適合您操作系統的 PHP。
Windows 用戶：
可以使用 WAMP、XAMPP 或 Laragon 等集成環境來輕鬆安裝 PHP。
安裝 Composer
Composer 是 PHP 的依賴管理工具，您需要它來安裝 Laravel 和其他依賴。
前往 Composer 官方網站下載並安裝 Composer。
安裝過程中，確保選擇正確的 PHP 路徑。
安裝 Laravel
安裝 Laravel 10 可以通過 Composer 完成。打開終端或命令提示符，然後運行以下命令：

composer create-project laravel/laravel=10.* --prefer-dist my-laravel-app

這將創建一個名為 my-laravel-app 的新 Laravel 專案。

安裝 Node.js 和 NPM
確保已安裝 Node.js（版本 16 或更高）和 NPM。您可以從 Node.js官方網站下載並安裝。
安裝前端依賴
在 Laravel 專案目錄中，運行以下命令來安裝前端依賴：

npm install

這將根據 package.json 文件中的定義安裝所有必要的前端依賴。

安裝 Vite 和相關插件

npm install --save-dev vite laravel-vite-plugin @vitejs/plugin-vue

vite: Vite 是一個現代化的前端構建工具，提供快速的開發環境和高效的生產構建。它支持熱模塊替換（HMR），使得開發過程更加流暢。
laravel-vite-plugin: 這是一個專為 Laravel 設計的插件，用於將 Vite 集成到 Laravel 應用中。它幫助處理 Laravel 的資產管理，使得在開發和生產環境中使用 Vite 變得更加簡單。
@vitejs/plugin-vue: 這是 Vite 的官方 Vue 插件，允許您在 Vite 應用中使用 Vue.js。它提供了對 Vue 單文件組件（.vue 文件）的支持。

npm install vue-router vuetify@next

vue-router: Vue Router 是 Vue.js 的官方路由管理器，允許您在應用中實現路由功能，支持單頁應用（SPA）的導航。它幫助您定義不同的路由，以便在應用中加載不同的組件。
vuetify@next: Vuetify 是一個基於 Material Design 的 Vue UI 庫，提供了一組豐富的 UI 組件。@next 表示安裝最新版本的 Vuetify，這通常是針對 Vue 3 的版本。

npm install vite-plugin-vuetify

vite-plugin-vuetify: 這是一個專為 Vite 設計的插件，用於支持 Vuetify。它自動處理 Vuetify 的樣式和組件，使得在 Vite 環境中使用 Vuetify 更加方便。這個插件幫助開發者快速集成 Vuetify，並優化構建過程。

npm install @mdi/font

@mdi/font: 這是 Material Design Icons 的字體包，提供了一組豐富的圖標，您可以在應用中使用。安裝後，您可以通過 CSS 類名來調用這些圖標，例如 <v-icon>mdi-home</v-icon>。這些圖標可用於增強用戶界面的可視性和易用性

這些命令安裝了構建和管理現代 Web 應用所需的核心工具和庫，包括 Vite 作為構建工具、Laravel 的整合插件、Vue.js 的路由管理器以及 Vuetify UI 庫。這些工具共同協作，使得開發過程更加高效且易於維護。

修改 vite.config.js
在專案根目錄下編輯 vite.config.js，內容如下：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
        vuetify({ autoImport: true }), // 確保這裡正確配置了
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

設定組件

創建 Vue 應用
在 resources/js 目錄下創建 app.js，並添加以下內容：

import "./bootstrap";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 引入路由配置
import vuetify from "./plugins/vuetify"; // 引入 Vuetify 配置

createApp(App)
.use(router) // 使用路由
.use(vuetify) // 使用 Vuetify
.mount("#app");

創建路由配置文件
在 resources/js 目錄下創建一個名為 router.js 的文件，並添加以下內容：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue'; // 引入 Home 組件
import About from './views/About.vue'; // 引入 About 組件

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/about',
        name: 'About',
        component: About,
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

創建Vuetify配置文件
在 resources/js/plugins/vuetify.js 中設定 Vuetify:

import '@mdi/font/css/materialdesignicons.css';
import 'vuetify/styles';
import { createVuetify } from 'vuetify';

export default createVuetify();

Laravel 路由定義
在 routes/web.php 中設置路由：

<?php

use Illuminate\Support\Facades\Route;

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

這段代碼的作用是將所有的 GET 請求都重定向到 app 視圖。這在單頁應用（SPA）中非常常見，因為 SPA 通常由前端框架（如 Vue.js 或 React）處理路由，而後端只需要返回一個單一的 HTML 文件。這樣，前端框架可以根據 URL 來動態加載不同的組件和頁面，而不需要後端進行額外的路由處理。

創建 Blade 視圖
在 resources/views 目錄下創建 app.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 + Vue</title>
    {{-- 這邊的 @vite 會將 resources/css/app.css 和 resources/js/app.js 載入到 HTML 中 --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    {{-- 這邊的 id 會對應到 resources/js/app.js 中的 el: '#app' --}}
    <div id="app"></div>
</body>

</html>

創建主頁面組件以顯示路由視圖
在 resources/js 目錄下創建 App.vue 組件。

APP.vue

<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title>我的應用程式</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text to="/">首頁</v-btn>
      <v-btn text to="/about">關於</v-btn>
    </v-app-bar>

    <v-main>
      <router-view /> <!-- 顯示當前路由的組件 -->
    </v-main>

    <v-footer app>
      <v-container fluid>
        <v-row justify="center">
          <v-col class="text-center">
            <p>© 2024 我的應用程式。保留所有權利。</p>
          </v-col>
        </v-row>
      </v-container>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
/* 添加樣式 */
</style>

創建頁面組件
在 resources/js/views 目錄下創建 Home.vue 和 About.vue 組件。

Home.vue

<template>
  <div>
    <h1>首頁</h1>
    <p>歡迎來到我的應用程式！</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
/* 添加樣式 */
</style>

About.vue

<template>
  <div>
    <h1>關於我們</h1>
    <p>這是關於我們的頁面。</p>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

<style scoped>
/* 添加樣式 */
</style>