合併Vue和Laravel

這份指南提供了如何將 Vue.js 和 Laravel 進行集成的詳細步驟，並涵蓋了開發環境的設置、所需的工具、以及相關的安裝和配置方法。下面是步驟的概述與要點，對於有意使用這些技術的開發者將有很大幫助。

必要條件

1. XAMPP（PHP 8.1 以上） - 用於提供本地開發環境。
2. 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 合併應用。

對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!

大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。

提醒，文章僅供正當的知識參考，文章不負任何責任。