vue commerce lab
1.0.0
このリポジトリには、Laravel の学習と実装のための実用的なアプリケーションとして機能する実験的な E コマース ダッシュボードが含まれています。これを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:seedPHP バージョンを 8.3 に設定します。
valet isolate [email protected]サイトを保護します。
valet secure開発サーバーを開始します。
npm run devサイト https://vue-commerce-lab.test にアクセスし、次の認証情報を使用してログインします。
password モデルはapp/Modelsディレクトリにあります。各モデルには、 database/factoriesおよびdatabase/seedersディレクトリに対応するファクトリとシーダーがあります。
モデルはアプリケーションのデータを管理する責任があります。コントローラーから入力を受信し、それを検証してデータベースに送信します。
このアプリケーションは 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 を、UI コンポーネントを個別に開発するには Storybook を利用します。
このアプリケーションには、すべてのモデルとコントローラーの 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このアプリケーションには、Vue コンポーネントをテストするための Vitest (公式テスト ランナー) と Vue Test Utils (公式テスト ライブラリ) の両方が装備されています。テストはコンポーネントの隣に配置し、 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 を解析するように構成されています。 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/
このアプリケーションには、UI コンポーネントを単独で開発するための Storybook が装備されています。ストーリーは 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:storybookMIT ライセンス (MIT)。ライセンスを参照してください
