laravel vue spa skeleton

私は現在、Composition Api、Vite、Ponia をストアマネージャーとして、新しい Laravel Vue 3 プロジェクトに取り組んでいます。

これは、Laravel、Vue、ElementUI を利用する大規模なモジュラー SPA の地下室です。

CRUD ジェネレーターはプロジェクトに統合されており、フロントエンドとバックエンドにスタンドアロン モジュールを作成します。

プロジェクトの主な目標は次のとおりです。

• モジュール間の固着を避けるため
• きれいなコードを書くための基礎を形成する
• 拡張しやすいように
• コードの重複を避けるため
• プロジェクトの開始時間を短縮するため
• プロジェクトのサポートとコードのナビゲーションにかかる時間を短縮するため
• 経験の浅いプログラマでも理解できるようにする

拡張機能

• バックエンド: Laravel 8
• フロントエンド: Vue + VueRouter + Vuex + VueI18n
• Vue-Auth、Axios、Sanctum で JWT を使用してログインします。
• API ルートはモジュールごとに個別にあり、 Modules/{ModuleName}/routes_api.phpにあります。
• ElementUI UI キット
• Lodash JS ユーティリティ
• 瞬間の時間操作
• FontAwesome 5 アイコン

インストール

• git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git
• cd laravel-vue-spa-skeleton
• composer install
• cp .env.example .env - .env ファイルをコピーします
• .envに DB 資格情報を設定します。
• php artisan key:generate
• php artisan migrate
• yarn install

テスト

単体テスト

php artisan test

使用法

• npm run watchまたはnpm run hot - ホットリロード用
• php artisan serveアンドゴー 127.0.0.1:8000
• 新しいユーザーを作成してログインします。

モジュールの作成

CRUD機能を備えたモジュールを簡単に作成できます。

php artisan make:module {ModuleName}

これにより、以下が作成されます。

• 移行database/migrations/000_00_00_000000_create_{ModuleName}_table.php

• モデルapp/Models/{ModuleName}.php

• 工場database/factories/{ModuleName}Factory.php

• テストtests/Feature/{ModuleName}Test.php

• バックエンド モジュールapp/Modules/{ModuleName}/

 {ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│   └── {ModuleName}Controller.php
│
├── Requests/
│   └── {ModuleName}Request.php
│
└── Resources/
    └── {ModuleName}Resource.php

• フロントエンド モジュールのresources/js/modules/{moduleName}/

 {moduleName}/
│
├── routes.js
│
├── api/
│   └── index.js
│
├── components/
│   ├── {ModuleName}List.vue
│   ├── {ModuleName}View.vue
│   └── {ModuleName}Form.vue
│
└── store/
    ├── store.js
    ├── types.js
    └── actions.js

モジュールを作成した後、必要なフィールドを追加してモデルと移行を編集できます。このフィールドをビューに追加することもできます。 php 職人移行を実行することを忘れないでください。

すべてのモジュールは動的にロードされます。

ビデオ