vue commerce lab
1.0.0
該儲存庫包含一個實驗性電子商務儀表板，可作為學習和實現 Laravel 的實際應用程式。我使用 Laravel Breeze 搭建了這個框架，並使用 Laravel Valet 進行本地開發。
route()函數公開Laravel的命名伺服器端路由，允許在Vue元件中輕鬆產生路由。對於任何有興趣使用這些技術開發功能齊全的 Web 應用程式的人來說，該專案可以作為一個綜合範例。
克隆儲存庫（到您的 Valet 網站目錄中）：
git clone [email protected]:gregrickaby/vue-commerce-lab.git安裝依賴項：
composer install && npm install建立.env檔：
cp .env.example .env建立database.sqlite檔：
touch database/database.sqlite產生應用程式密鑰：
php artisan key:generate運行遷移：
php artisan migrate:fresh為資料庫新增種子：
php artisan db:seed將 PHP 版本設定為 8.3：
valet isolate [email protected]保護站點：
valet secure啟動開發伺服器：
npm run dev造訪網站：https://vue-commerce-lab.test 並使用以下憑證登入：
password 模型位於app/Models目錄中。每個模型在database/factories和database/seeders目錄中都有一個對應的工廠和seeder。
模型負責管理應用程式的資料。它們接收來自控制器的輸入，驗證它，然後將其發送到資料庫。
該應用程式使用 Vue 和 Inertia，因此視圖位於resources/js/pages目錄中並透過 web.php 檔案路由。
視圖負責向使用者顯示資料。它們從控制器接收數據，然後將其呈現給瀏覽器。
控制器位於app/Http/Controllers目錄。每個控制器在tests/Feature目錄下都有對應的測試
控制器負責處理請求並回傳回應。他們接收用戶的輸入，驗證它，然後將其傳遞給模型。
路由位於routes目錄中。 web.php檔案包含應用程式的所有路由。
Vue.js 檔案位於resources/js目錄中。
目錄結構遵循標準 Laravel 約定，新增了用於 TypeScript 介面和類型的types目錄，以及用於實用程式和輔助函數的utils目錄。
├── resources
│ ├── css
│ │ └── app.css <-- TailwindCSS
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
│ │ │ ├── Molecules
│ │ │ ├── Organisms
│ │ ├── Layouts
│ │ ├── Pages
│ │ │ ├── Customers
│ │ │ │ ├── Create.vue
│ │ │ │ ├── Index.vue
│ │ │ │ └── {customer} <-- Dynamic route
│ │ │ │ ├── Edit.vue
│ │ │ │ └── Show.vue
│ │ ├── app.ts <-- Vue app
│ │ ├── types
│ │ │ └── index.d.ts <-- Typescript interfaces and types
│ │ └── utils
│ │ └── index.ts <-- Utility and helper functions
│ └── views
│ ├── app.blade.php
│ └── welcome.blade.php
周圍有{}資料夾是動態路由。例如， /Pages/Customers/{customers}/Edit.vue customers}/Edit.vue 是動態路由，將符合任何客戶 ID。然後，該 ID 可在Edit.vue元件中使用。
該應用程式配備了 PHPUnit 和 Vitest 進行測試。它還利用 Github Actions 進行持續整合和測試，並利用 Storybook 來獨立開發 UI 元件。
該應用程式配備了適用於所有模型和控制器的 PHPUnit 測試。 PHP 測試位於/tests目錄：
├── tests
│ ├── Feature
│ │ ├── Auth
│ │ │ ├── AuthenticationTest.php
│ │ └── ExampleTest.php
│ └── Unit
│ └── ExampleTest.php
Laravel 路由回傳依賴 Vue 元件是否存在的 Inertia 回應。如果沒有建置的前端資產，這些元件將不可用，從而導致向這些路由發出請求的測試失敗。為了避免這種情況，您必須在執行測試時在背景執行開發伺服器。
啟動開發伺服器：
npm run dev使用下列命令執行 PHPUnit 測試：
php artisan test使用以下命令執行特定測試：
php artisan test --filter=CustomerTest該應用程式配備了 Vitest（官方測試運行器）和 Vue Test Utils（官方測試庫），用於測試 Vue 元件。測試必須放置在元件旁邊並命名為ComponentName.test.ts ：
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
您可以使用以下命令執行測試：
npm run testVitest 將以監視模式執行測試，因此您可以對元件進行變更並即時查看結果。
元件測試是用 TypeScript 編寫的，並使用 Vitest API 進行斷言。這是一個例子：
import ApplicationLogo from '@/Components/Atoms/ApplicationLogo/ApplicationLogo.vue'
import { mount } from '@vue/test-utils'
import { describe , expect , test } from 'vitest'
/**
* Define a test suite.
*
* @see https://vitest.dev/api/#describe
*/
describe ( 'ApplicationLogo' , ( ) => {
/**
* Mount the component.
*
* @see https://vue-test-utils.vuejs.org/api/#mount
*/
const wrapper = mount ( ApplicationLogo )
/**
* Assert the component renders.
*
* @see https://vitest.dev/api/expect.html
*/
test ( 'component renders' , ( ) => {
expect ( wrapper ) . toBeTruthy ( )
} )
/**
* Assert the component is a SVG.
*/
test ( 'component is SVG' , ( ) => {
wrapper . find ( 'svg' )
} )
/**
* Assert the component matches the snapshot.
*
* @see https://vitest.dev/api/expect.html#tomatchsnapshot
*/
test ( 'component matches snapshot' , ( ) => {
expect ( wrapper . html ( ) ) . toMatchSnapshot ( )
} )
} ) Github Actions 也將對main分支的每個 PR 執行測試。
該應用程式配備了 ESLint 並配置為解析 TypeScript。自動 linting JavaScript 和 Vue 檔案發生在on_save上。
您也可以手動執行 lint：
npm run lint該應用程式配備了 Stylelint 和 TailwindCSS 的 Prettier 插件。自動檢查和格式化發生在on_save上。
JavaScript 和 PHP 檔案的自動格式化是為on_save配置的。請參閱 VSCode 設定和擴充配置以取得更多資訊。
使用以下命令手動執行 Prettier 和 Pint：
npm run format && composer run lint看故事書：https://gregrickaby.github.io/vue-commerce-lab/
該應用程式配備了 Storybook，用於獨立開發 UI 元件。故事必須用 CSF 寫，放置在resources/js/Components目錄中的元件旁。故事必須命名為ComponentName.stories.ts ：
├── resources
│ ├── js
│ │ ├── Components
│ │ │ ├── Atoms
│ │ │ │ ├── ApplicationLogo
│ │ │ │ │ ├── ApplicationLogo.stories.ts <-- Storybook
│ │ │ │ │ ├── ApplicationLogo.test.ts <-- Test
│ │ │ │ │ ├── ApplicationLogo.test.ts.snap <-- Snapshot
│ │ │ │ │ └── ApplicationLogo.vue <-- Vue Component
運行 Storybook：
npm run storybook使用以下內容建立故事書：
npm run build:storybook麻省理工學院許可證 (MIT)。請參閱許可證
