iT邦幫忙

2

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

  • 分享至 

  • xImage
  •  

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

環境準備

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

  1. 安裝 PHP
    Laravel 10 需要 PHP 8.1 或更高版本。您可以從 PHP 官方網站 下載並安裝適合您操作系統的 PHP。
    Windows 用戶:
    可以使用 WAMP、XAMPP 或 Laragon 等集成環境來輕鬆安裝 PHP。

  2. 安裝 Composer
    Composer 是 PHP 的依賴管理工具,您需要它來安裝 Laravel 和其他依賴。
    前往 Composer 官方網站 下載並安裝 Composer。
    安裝過程中,確保選擇正確的 PHP 路徑。

  3. 安裝 Laravel
    安裝 Laravel 10 可以通過 Composer 完成。打開終端或命令提示符,然後運行以下命令:

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

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

  1. 安裝 Node.js 和 NPM
    確保已安裝 Node.js(版本 16 或更高)和 NPM。您可以從 Node.js官方網站 下載並安裝。

  2. 安裝前端依賴
    在 Laravel 專案目錄中,運行以下命令來安裝前端依賴:

npm install

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

  1. 安裝 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 庫。這些工具共同協作,使得開發過程更加高效且易於維護。

  1. 修改 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',
        },
    },
});
  1. 設定組件

    1. 創建 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");
    
    
    1. 創建路由配置文件
      在 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;
    
    1. 創建Vuetify配置文件
      在 resources/js/plugins/vuetify.js 中設定 Vuetify:
    import '@mdi/font/css/materialdesignicons.css';
    import 'vuetify/styles';
    import { createVuetify } from 'vuetify';
    
    export default createVuetify();
    
  2. 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 來動態加載不同的組件和頁面,而不需要後端進行額外的路由處理。

  1. 創建 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>

  1. 創建主頁面組件以顯示路由視圖
    在 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>
  1. 創建頁面組件
    在 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>
  1. 最後,運行以下命令來啟動 Laravel 和 Vite 開發伺服器:
php artisan serve
npm run dev

訪問您的應用程序網址,即可看到整合了 Laravel、Vue 3 和 Vuetify 的現代化 Web 應用。

總結
通過以上步驟,我們成功地將 Laravel 10 與 Vue 3 和 Vuetify 整合在一起,構建了一個功能強大且美觀的單頁應用。這種架構不僅提高了開發效率,還使得前後端分離開發成為可能,從而增強了應用的可維護性和擴展性。
接下來,我計畫進一步擴展這個系統,導入更完善的會員登入系統和權限管理功能。
如果您對這個主題感興趣,或者希望看到更多關於如何實現這些功能的詳細步驟,請在下方留言告訴我!您的反饋將幫助我決定接下來的內容方向,也讓我們能夠一起探索如何構建一個更安全、更靈活的應用程式。

/images/emoticon/emoticon06.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

3
jameschiu126
iT邦新手 5 級 ‧ 2024-10-01 14:55:43

很受用~ 好人一生平安

我要留言

立即登入留言