在當今的 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 文件中的定義安裝所有必要的前端依賴。
npm install --save-dev vite laravel-vite-plugin @vitejs/plugin-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 庫。這些工具共同協作,使得開發過程更加高效且易於維護。
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',
},
},
});
設定組件
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");
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;
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 來動態加載不同的組件和頁面,而不需要後端進行額外的路由處理。
<!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>
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>
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>
php artisan serve
npm run dev
訪問您的應用程序網址,即可看到整合了 Laravel、Vue 3 和 Vuetify 的現代化 Web 應用。
總結
通過以上步驟,我們成功地將 Laravel 10 與 Vue 3 和 Vuetify 整合在一起,構建了一個功能強大且美觀的單頁應用。這種架構不僅提高了開發效率,還使得前後端分離開發成為可能,從而增強了應用的可維護性和擴展性。
接下來,我計畫進一步擴展這個系統,導入更完善的會員登入系統和權限管理功能。
如果您對這個主題感興趣,或者希望看到更多關於如何實現這些功能的詳細步驟,請在下方留言告訴我!您的反饋將幫助我決定接下來的內容方向,也讓我們能夠一起探索如何構建一個更安全、更靈活的應用程式。