VUE詳細なプロジェクトのディレクトリ構造

プロジェクト

分離後の単一ページのアプリケーション開発の前端と後端のために、あなたは、最新の言語を使用することができES次に特徴、開発環境ベースのフロントエンドvue.jsの開発のようSCSS。プロジェクトが含まれています:

ベースライブラリ:vue.js、VUEルータ、vuex 、WHATWGフェッチ
ツール包装/コンパイル:WebPACKの、バベル、ノードSASS
ユニットツールをテストする:カルマ、モカ、sinon-チャイ
ローカルサーバ:エクスプレス

ディレクトリ構造

├──README.mdプロジェクト

├──のindex.htmlエントリページ

├──ビルドビルドスクリプトディレクトリ

│├──ビルドは - server.jsは、ローカルビルドサーバーを実行して、ページが建物後にアクセスすることができます

│├──build.js本番環境のビルドスクリプト

│├──DEV - client.js開発サーバ熱過負荷スクリプト、主に自動的にリフレッシュページの開発フェーズを実装するために使用される

│├──DEV - server.jsは、ローカルの開発サーバーを実行する

│├──utils.jsビルド関連のユーティリティ

│├──webpack.base.conf.js wabpack基本構成

│├──webpack.dev.conf.js wabpack開発環境設定

│└──webpack.prod.conf.js wabpack本番環境の設定

├─ ─設定プロジェクトの設定

│├──dev.env.js開発環境変数

│├──index.jsプロジェクトの設定ファイル

│├──prod.env.js本番環境変数

│└──test.env.jsテスト環境変数

├──モックモックデータディレクトリ

│└──hello.js 

├── のためのパッケージ変更スクリプトNPMプロジェクト、依存関係やその他の情報を定義する.json NPMパッケージ構成ファイル、

├ ──SRCソースディレクトリ

│├──main.js入り口のjsファイル

│├──app.vueルートコンポーネント

│├──部品の共通コンポーネントディレクトリ

││└──title.vue 

│├──資産リソースディレクトリを、リソースがwabpack構成されている

││└──画像

││└──logo.png 

│├──遠位ルーティング経路

││└──index.js 

│├──ストアアプリケーションレベルのデータ(状態)

││└── index.js 

│└──ページビューディレクトリ

│├──hello.vue 

│└──notfound.vue 

├──静的             純粋に静的リソースではなく、wabpack建物。

└──テストテストファイルのディレクトリ(単位E2E)

  └──ユニットテストユニット

    ├──index.js入口スクリプト

    ├──karma.conf.jsカルマプロフィール

    └──スペック単一のプローブケースディレクトリ

      └──こんにちは。 spec.js

 

 

投稿者:ポータル

おすすめ

転載: www.cnblogs.com/JonaLin/p/12580329.html