spa starter kit

Codecast のシングル ページ アプリケーション スターター キット

Vue.js と Laravel 上に構築された、非常に独自性の高いシングル ページ アプリケーション スターター キットです。

このパッケージには、シングル ページ アプリケーションの開始点として機能する 2 つの個別のプロジェクト、Vue.js プロジェクト (vue-cli + webpack テンプレートで作成) と Laravel 5.3 プロジェクトが含まれています。

これらは、単に新しく作成されたプロジェクトではなく、完全に動作するアプリケーションであり、変更したり拡張して独自のアプリケーションにすることができます。

デモ

ライブデモは https://spa.codecasts.rocks/ でご覧いただけます。

特徴

1. クライアント側
   • vue-cli + webpack テンプレートを使用して Vue.js 2.0 プロジェクトを作成
   • Vuex による一元的な状態管理
   • Vue-routerによるルート管理
   • JWTによる認証
   • ローカルに保存された情報を使用してユーザーのサインインを維持する
   • Axios を使用した HTTP リクエスト
   • ESLint と AirBNB プリセット
   • LaravelのLengthAwarePaginatorと統合されたページネーション
   • SweetAlert が提供するアラートと確認アラート
2. サーバー側
   • ララベル5.3
   • JWTによる認証
   • フラクタル
   • Dingo による Web サービス RESTful (予定)

前提条件

NodeとYarn (最新バージョン)、およびPHP 7とMySQLがインストールされていることを確認してください。

インストール

クローン作成

これらのコマンドはリポジトリをダウンロードして準備します。

 git clone --depth 1 -b master [email protected]:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

設定

1. クライアント側 - これは vue-cli で作成された Vue.js プロジェクトです
   • ターミナルcd client && yarn && yarn run devを使用します。
2. サーバー側 - これは Laravel 5.3 プロジェクトです
   • 端子付き:
     • webserviceフォルダーに移動し、次の操作を行います。
     • composer install Laravel およびサードパーティのパッケージをインストールする
     • 空のデータベース ファイルを作成するには、 touch database/database.sqlite
     • cp .env.example .envでインストールを構成します
     • php artisan key:generateプロジェクトの一意のキーを生成します
     • プロジェクトの一意のキーを生成するためのphp artisan jwt:secret
     • php artisan migrateすべてのテーブルを作成します
     • php artisan db:seedテーブルを偽のデータで埋める
     • php artisan serve

使用法

1. クライアント側
   • アプリケーションはhttp://localhost:8080で利用可能になります。
2. サーバー側
   • API エンドポイントは http:// localhost:8000/apiです

テスト

Webserviceフォルダーに移動し、コンポーザー テスト スクリプトを実行します。

$ composer test 

言及する価値のあるもの

1. エラー処理は、Axios のインターセプターを使用してグローバルに行われます。ただし、コンポーネント内で .catch() エラーを発生させて、そのスコープに関連するアクションを実行することはできます。 /client/src/plugins/http.js を参照してください。

2. 同様に、エラー メッセージは 1 つのコンポーネント (/client/src/modules/general/alerts.vue) 内に存在し、その表示は Vuex プロパティによって制御されます。したがって、メッセージを表示/非表示にするには、コンポーネント内から Vuex アクションをディスパッチするだけです。

3. サーバーリクエスト中に表示されるスピナー (右上のユーザー識別の近くを参照) も、Vuex プロパティによって制御されます。表示/非表示の手順は上記 2 と同様です。

4. ルートと Vuex モジュールは、それらが動作するモジュールの近くに存在します。常にモジュール ディレクトリ内の Routes.js と Store.js を探してください。 /client/src/modules/categories を参照してください。

5. 重要: webserviceディレクトリにある Laravel プロジェクトは、ルートとコントローラーの追加を超えて変更されました。たとえば、 webservice/app/Exceptions/Handler.php は、 HttpExceptions だけでなくすべての例外をクライアントに返すように元のバージョンから変更されました。その他にも変更が加えられています。したがって、コントローラーとルートを新しいプロジェクトにコピーするのではなく、常にこのプロジェクトを使用して独自のプロジェクトを構築することをお勧めします。

貢献する

1. フォークしてください！
2. 開発から機能ブランチを作成します: git checkout -b feature/my-new-feature
3. コードを書きます。コードをコメント化します。
4. 変更をコミットします: git commit -am 'Add some feature'
5. ブランチにプッシュ: git push origin feature/my-new-feature
6. ブランチを開発するためにプル リクエストを送信します :D

クレジット

Fábio Vedovelli と熱心な貢献者。

ライセンス

MITライセンスに基づいてライセンスされています。