這份指南提供了如何將 Vue.js 和 Laravel 進行集成的詳細步驟，並涵蓋了開發環境的設置、所需的工具、以及相關的安裝和配置方法。下面是步驟的概述與要點，對於有意使用這些技術的開發者將有很大幫助。
必要條件
- XAMPP（PHP 8.1 以上） - 用於提供本地開發環境。
- Node.js（LTS版本） - 用於支持前端的 JavaScript 工具和框架。
開發工具
- Chrome瀏覽器，並安裝 Vue.js Devtools。
- VSCode 開發工具，建議安裝以下擴展：
- Vue 3 Snippets
- Inertia.js
- Vue Language Features (Volar)
建立專案及安裝套件
1. Laravel 專案建立
composer create-project laravel/laravel:^10.* <專案名稱>
2. 安裝 PHP 套件
- Laravel Breeze 認證套件：
composer require laravel/breeze ^1.29 --dev
- reliese/laravel 自動生成Models套件：
composer require reliese/laravel --dev
- PHP_CodeSniffer 程式碼規範套件：
composer require "squizlabs/php_codesniffer" --dev
- Laravel Breeze的Vue及SSR版本：
php artisan breeze:install vue --ssr
3. 安裝 ESLint
npm init @eslint/config
選擇設置選項後，安裝 ESLint。
4. 安裝前端 JavaScript 套件
這些套件包括：- Vite 的 Eslint 插件
- 無障礙檢查插件
- 打包分析插件
- Vue 組件自動引用插件
- Pinia 狀態管理等
npm install vite-plugin-eslint eslint-plugin-vuejs-accessibility rollup-plugin-visualizer unplugin-vue-components unplugin-auto-import -D
npm install tailwind-merge pinia
環境設置
1. 發布配置
- Inertia SSR 配置檔：
php artisan vendor:publish --provider="Inertia\ServiceProvider"
- 自動生成模型配置檔：
php artisan vendor:publish --tag=reliese-models
- 清除快取：
php artisan config:clear
2. 修改配置文件
config/models.php
- 將
snake_attributes設置為false，以及將縮排設置為4個空格。
config/inertia.php
- 設置 SSR 並配置 SSR 伺服器端口和開關。
.env 和 .env.example
- 增加 SSR 端口和開關設置。
VITE_PUSHER_SSR_PORT=13714
SSR_ENABLED=false
編輯與修改文件
vite.config.js
設定 Vue 和其他前端工具，並且引入相關插件：
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
plugins: [
laravel({ input: 'resources/js/app.js', ssr: 'resources/js/ssr.js', refresh: true }),
vue(),
eslintPlugin(),
AutoImport({
imports: ['vue'],
dirs: ['resources/js/Store/**'],
vueTemplate: true,
eslintrc: { enabled: true },
}),
Components({ dirs: ['resources/js/Components'] }),
],
});
app.js 和 ssr.js
在 resources/js/app.js 和 resources/js/ssr.js 中進行設置，特別是引入了 Pinia 狀態管理，並設置了布局。
Laravel 中新增 PHP 共用函數
在 app/Http/Helpers.php 中加入固定格式的回應函數：
function rtFormat($data = [], $code = 1, $message = '執行成功')
{
$status = [0, 1];
if (!is_int($code) || !in_array($code, $status) || !is_string($message)) {
throw new Exception('rt_format函式傳入參數錯誤');
}
$format = (object)[
'rt_code' => $code,
'rt_message' => $message,
'rt_data' => $data,
];
return $format;
}
單元測試
修改 phpunit.xml，設置相關選項，例如停止在失敗或錯誤時的繼續測試：
<phpunit stopOnFailure="true" stopOnError="true">
<php>
<env name="DB_DATABASE" value="test"/>
</php>
</phpunit>
結語
這份指南詳細描述了如何設置與配置 Vue.js 和 Laravel 的集成專案，並且提供了相關套件安裝、配置文件修改的步驟。對於希望結合前後端技術的開發者，這些步驟可以幫助迅速搭建開發環境。接下來會介紹Laravel 合併應用。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。
提醒，文章僅供正當的知識參考，文章不負任何責任。
