/sample-ui-vue-flux

Bootstrap + Vue.js + Vuex [ Scss / Babel ] ( Flux Model )

Primary LanguageVueMIT LicenseMIT

sample-ui-vue-flux

はじめに

BootStrap / Vue.js を元にしたプロジェクト Web リソース ( HTML / CSS / JS ) です。 Vuex を用いた Flux 風のモデルを前提としています。

※ライブラリではなく上記ライブラリを用いた単純な実装サンプルです。

サンプル確認用の API サーバとして以下のいずれかを期待します。

従来型のマルチページ実装については sample-ui-vue-pages 、 SPA 実装については sample-ui-vue を参照してください。

ビルド / テスト稼働環境構築

ビルドは Node.js + Vue CLI + Yarn or npm で行います。以下の手順でインストールしてください。

  1. Node.js の公式サイトからインストーラをダウンロードしてインストール。
  2. 「 npm install -g yarn 」を実行して Yarn をインストール。
    • Mac ユーザは 「 sudo npm install -g yarn 」 で。
  3. コンソールで本ディレクトリ直下へ移動後、「 yarn 」を実行して package.json 内のライブラリをインストール

動作確認

動作確認は以下の手順で行ってください。

  1. clone した sample-boot-hibernate を起動する。
    • 起動方法は該当サイトの解説を参照
    • application.yml の extension.security.auth.enabled を true にして起動すればログイン機能の確認も可能
  2. コンソールで本ディレクトリ直下へ移動し、 「 yarn serve 」 を実行
    • 確認用のブラウザが自動的に起動する。うまく起動しなかったときは 「 http://localhost:3000 」 へアクセス

開発の流れ

基本的に .js ( ES201x ) または .vue ファイルを Web リソース ( .html / .css / .js ) へ Vue CLI でリアルタイム変換させながら開発をしていきます。
動作確認は Vue CLI が提供する Web サーバを立ち上げた後、ブラウザ上で行います。

各種テンプレートファイルの解説

  • Sass (SCSS)
    • CSS 表記を拡張するツール。変数や mixin 、ネスト表記などが利用可能。
  • ES201x with Babel
    • ES201x 用の Polyfill 。 ES5 でも ES201x 風に記述が可能。

各種テンプレートファイルの変更監視 / Web サーバ起動

  • コンソールで本ディレクトリ直下へ移動し、 「 yarn serve 」 を実行

配布用ビルドの流れ

配布リソース生成の流れは開発時と同様ですが、監視の必要が無いことと、配布リソースに対する minify や revison の付与などを行う必要があるため、別タスク （ build-prod ） で実行します。

配布用 Web リソースのビルド / リリース

  • コンソールで本ディレクトリ直下へ移動し、 「 yarn build 」 を実行
  • dist ディレクトリ直下に出力されたファイルをリリース先のディレクトリへコピー

ポリシー

  • JS / CSS の外部ライブラリは npm で管理する
  • JS は Vue CLI を利用して生成する
  • Vue.js の実装アプローチは vue-hackernews-2.0 を参考に
  • Flux 関連は Vuex のリファレンス ベースでなるべく尊重
    • Actions の管理がどうしても煩雑に思えたので Vue.js の Mixin を利用して同概念を代用
    • Store の管理対象はコンポーネント間で横断的に利用される情報のみとし、全てをその管理下にはおかない
      • 入力情報やトランザクション系の揮発性高い参照情報とかは入れない

ディレクトリ構成

ディレクトリ構成については Vue CLI のディレクトリポリシーに準拠します。

依存ライブラリ

ライブラリ バージョン 用途/追加理由
vue 2.x アプリケーションの MVVM 機能を提供
vue-router 3.x Vue.js の SPA ルーティングサポート
vuex 3.x Vue.js の Flux 概念サポート
jquery 3.3.x DOM 操作サポート (for Bootstrap)
lodash 4.17.x 汎用ユーティリティライブラリ
bootstrap 4.x CSS フレームワーク
fontawesome-free 5.x フォントアイコンライブラリ

詳細は package.json を確認してください

License

本サンプルのライセンスはコード含めて全て MIT License です。
プロジェクト立ち上げ時のベース実装サンプルとして気軽にご利用ください。