このプロジェクトについて

# プロジェクト概要 本プロジェクトは、vue2 + vuexを用いて作成された大規模シングルページアプリケーションのサンプルです。「饿了么（Ele.me）」のような出前サービスのシナリオを題材としており、READMEによると、作者が余暇を利用してゼロからレイアウトし、完成まで約2ヶ月を要したとのことです。単なるデモではなく、機能が完備されロジックが複雑な実戦的な練習を目的としています。なお、本プロジェクトは慕課網（imooc）の関連コースとは無関係であり、個人の練習用であるため、実際の注文には公式クライアントを使用することが推奨されています。 # 技術スタック vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg。大量のES6/7新特性を使用しているため、Node.jsはバージョン6.0以上が必要です。 # プロジェクトの実行方法 ``` git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install または yarn (推奨) npm run dev ``` # インターフェースデータと付属プロジェクト すべてのインターフェースデータは、付属のバックエンドシステム「node-elm」から提供されます。フロントエンドとバックエンドの両方を同時に開発したい場合は、バックエンドシステムをダウンロードし、起動コマンドを `npm run dev` ではなく `npm run local` に変更してください。また、element-uiで構築された管理画面「vue2-manage」も提供されています（フロントエンド開発のみの場合は無視して構いません）。プレビューアドレスとインターフェースへのアクセスにはhttpsを使用する必要があります。 # 実装済み機能 - 位置情報機能 - 都市選択 - 住所検索 - 選択した住所付近の店舗リスト表示 - グルメ・レストラン検索 - 距離、販売数、評価、看板メニュー、配送方法などによるソートおよびフィルタリング - レストランメニュー一覧ページ - ショッピングカート機能 - 店舗レビューページ - 食品詳細ページ - 店舗詳細ページ - ログイン、会員登録 - パスワード変更 - マイページ（個人センター） - SMS送信、音声認証 - 注文機能 - 注文履歴リスト - 注文詳細 - アプリダウンロード - 配送先住所の追加・削除・変更 - アカウント情報 - サービスセンター - 紅包（クーポン） - プロフィール写真のアップロード 未実装機能：決済機能（READMEにて「実現不可能」と記載）。 # プロジェクト構造 ソースコードは `src` ディレクトリに配置されており、以下の構成となっています： - `components`: 共通コンポーネント（ポップアップ、カート、カウントダウン、ローディングアニメーション、評価星、店舗リスト、フッター・ヘッダーなど） - `config`: 環境切り替え（env.js）、データ取得（fetch.js）、共通メソッド（mUtils.js）、単位変換（rem.js） - `images`: 画像ファイル - `page`: ビジネスロジック別のページディレクトリ（balance, benefit, city, confirmOrder, download, find, food, forget, home, login, msite, order, points, profile, search, service, shop, vipcardなど） - `plugins`: プラグイン - `router`: ルーティング設定 - `service`: インターフェースの一元管理（getData.js）、一時データ（tempdata） - `store`: vuexのaction, getters, index, modules, mutation-types, mutations - `style`: スタイル定義（common.scss, mixin.scss, swiper.min.css） ルートディレクトリには `build`（webpack設定）、`config`（ビルドパス）、`elm`（デプロイファイル）、`screenshots`（スクリーンショット）、`App.vue`、`main.js`、`index.html` などが含まれます。READMEによれば、計56ディレクトリ、203ファイルで構成されています。 # 作者のまとめと今後の目標 READMEでは、金銭が関わるウェブロジックの複雑さ、店舗や食品種類の多さ、複雑なページインタラクションについて触れられており、特にカートと注文機能の実装におけるデータとロジックの構築に苦労したとのことです。また、設計書やAPIドキュメントがなかったため、試行錯誤しながら進めたとしています。結論として、複雑なインタラクションを処理する上でvuexは不可欠であり、vue + vuexで十分に大規模なSPAを構築できると考えています。今後の目標として、Node.jsによる模擬バックエンドシステムの構築、Android/iOS両対応のネイティブアプリ版の開発、および時間があれば販売店向けバージョンの作成を挙げています。 # デモとライセンス READMEにオンラインデモのアドレス（Chromeのモバイルモードでの閲覧を推奨）とモバイル用QRコードが提供されており、店舗リスト、フィルタリング、カート、注文確認、検索、ログイン、マイページなどのスクリーンショットが添付されています。プロジェクトに関する交流はGitterグループやIssues/PRを通じて行えます。ライセンスはGPLです。