vueファイルディレクトリ構造の詳細

プロジェクト概要
vue.jsの先端開発環境に基づいて、前後端分離後の単一ページアプリケーション開発に用いられ、開発時にES Next、scssなどの最新の言語特性を使うことができます。プロジェクトの内容:

ベースライブラリ：vue.js、vue-router、vuex、whatwg-fetch

コンパイル/パッキングツール：webpack、babel、node-sass

ユニットテストツール：kama、mocha、sinon-chai

ローカルサーバ：express

ディレクトリ構造

├── README.md                
├── index.html               
├── build                    
│  ├── build-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      
├── config                 
│  ├── dev.env.js                 
│  ├── index.js                  
│  ├── prod.env.js                 
│  └── test.env.js                 
├── mock              mock    
│  └── hello.js
├── package.json          npm     ，        npm  ，      
├── src                     
│  ├── main.js               js  
│  ├── app.vue                
│  ├── components                 
│  │  └── title.vue
│  ├── assets                 ，       wabpack  
│  │  └── images
│  │    └── logo.png
│  ├── routes                 
│  │  └── index.js
│  ├── store                   （state）
│  │  └── index.js
│  └── views                  
│    ├── hello.vue
│    └── notfound.vue
├── static                  ，   wabpack  。
└── test                    （unit&e2e）
  └── unit                  
    ├── index.js                
    ├── karma.conf.js          karma    
    └── specs                case  
      └── Hello.spec.js

環境のインストール
本プロジェクトはnode.jsに依存しています。使用前にnode.jsとcnpmをインストールしてください。
自分でnode.jsをダウンロードしてインストールします。https://nodejs.org/en/download/
cnpmコマンドをインストールします。

npm install -g cnpm --registry=https://registry.npm.taobao.org

クイックスタート

git clone https://github.com/hanan198501/vue-spa-template.git 
cd vue-spa-template
cnpm install
npm run dev

コマンドリスト:

#         ，         ，            ，      http://localhost:8081
npm run dev

#            ，           "dist"   ，
npm run build

#       ，         
npm run build-server

#      
npm run unit

前後端分離
プロジェクトはspa方式に基づいて前後端分離を実現し、サーバーはnginxによってフロントエンドページとバックエンドインターフェース要求を区別し、異なるサービスに配信する。先端は物理的に入口ページだけであり、ルートはフロントエンドによって制御され（vue-routerに基づいて）、それぞれのデータとコンポーネントをローディングしてレンダリングする。
インターフェース
前後の端が分離された後、開発前にインターフェース情報（要求住所、パラメータ、戻り情報など）を定義して、フロントエンドはmockの方式によって、コードを開始できます。バックエンドインターフェースreadyを待つ必要はありません。プロジェクトのローカル開発サーバはexpressに基づいて構築され、expressのミドルウェア機構を通じて、私達はすでにdev-serverにインターフェースmock機能を追加しました。開発時、インターフェースのmockデータは統一的にmockディレクトリの下に置かれています。各ファイルの中には以下のようなものがあります。

module.exports = {

 //     
 api: '/api/hello',

 //        http://expressjs.com/zh-cn/4x/api.html
 response: function (req, res) {
  res.send(`
   <p>hello vue!</p>
  `);
 }
}

モジュール化
開発時はES 2015 module文法を使って、構築時には各ファイルがamdモジュールにコンパイルされます。
コンポーネント化
全体のアプリケーションは、vueコンポーネントの方式で構築され、vue-routerによって対応するコンポーネントの展開を制御し、コンポーネントツリー構造は以下の通りである。

app.vue                （        ）
  ├──view1.vue               ，   views     ，     ，       
  │  ├──component1.vue            ，      components   ，     views    
  │  ├──component2.vue
  │  └──component3.vue
  ├──view2.vue
  │  ├──component1.vue
  │  └──component4.vue
  └──view3.vue
    ├──component5.vue
    ……

ユニットテスト
各コンポーネントのためにユニットテストを作成することができます。test/unit/specsディレクトリの下に置いて、ユニットテスト用例のディレクトリ構造提案とテストのファイルは一貫しています。npm run unitを実行するとspec.jsファイルを巡回してテストレポートをtest/unit/coverageディレクトリに出力します。
インターロック方式
前後端分離後、サービスと先端の開発環境が2台の異なるマシンにあるため、先端の非同期要求は後端マシンに代行する必要があります。接続時には、proxyパラメータでdevスクリプトを実行すればいいです。すべてのmockディレクトリで定義されたインターフェースはproxyパラメータで指定されたマシンに転送されます。

# 172.16.36.90:8083           
npm run dev -- --proxy=172.16.36.90:8083

このように、もしmockディレクトリにインターフェース/appi/helloが定義されていると、転送されます。http://172.16.36.90/:8083/api/hello
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。