Vue CLI 3マルチページアプリケーションプロジェクトの構築

プロジェクトの初期段階では、ゼロからローカルフロントエンド開発環境の構築と構成は煩雑な作業であり、プロジェクトディレクトリ構造、プロジェクト基本構成、Webpack構成などを考慮する必要がある.Vue CLI 3により、プロジェクトを迅速に生成できます.これにより、構成に多くの時間を費やすことなく、書き込みアプリケーションに集中できます.しかし、公式のvue createコマンドは、単一ページアプリケーションのプロトタイプを迅速に作成するしかなく、複数ページアプリケーションを開発するにはさらにいくつかのものを構成する必要があります.less,sassを同時にサポートできます.
説明
Vue CLI 3マルチページアプリケーション*Gitアドレス:https://github.com/zydemail/v....
初期化

git clone https://github.com/zydemail/vue-mpa.git
cd vue-mpa
npm install

使用

開発:

ローカル実行:npm run serve:dev注意:ローカル開発デバッグサーバインタフェースはブラウザを開いてドメインをまたぐ必要があります.ChromeアプリケーションストアにAllow CORS:Access-Clontrol-Allow-Originプラグインをインストールすれば、コードフォーマットエラーの修復を解決できます.npm run lintfix

パッケージ:

開発環境:npm run devテスト環境:npm run build:tests生産環境:npm run build:prod
ディレクトリ構造の説明

│  .browserslistrc //        
│  .env.development //       ，         ，   process.env   ，                 
│  .env.localdev //         ，         ，   process.env   ，                 
│  .env.production //       ，         ，   process.env   ，                 
│  .env.tests //       ，         ，   process.env   ，                 
│  .eslintrc.js // eslint   
│  .gitignore
│  .postcssrc.js // postcss  ，      ，     
│  babel.config.js // babel  ，      ，     
│  package-lock.json
│  package.json
│  README.md
│  title.js //           title
│  vue.config.js // vue   ，    webpack  ，    https://cli.vuejs.org/zh/config/
│  
├─public //                ，  index.html      ，                 htdocs     ，     webpack    。
│      favicon.ico
│      index.html //                ，                ，       vue.config.js         ，    https://cli.vuejs.org/zh/config/#pages
│      
├─src //       
│  ├─assets //      ，    css、images 
│  │      logo.png
│  │      
│  ├─components //      ，         
│  │      Header.vue
│  │      
│  ├─pages //      ，           
│  │  ├─about // about   
│  │  │      app.js //       
│  │  │      app.vue //     html、css、js         
│  │  │      
│  │  ├─index
│  │  │      app.js
│  │  │      app.vue
│  │  │      
│  │  └─user
│  │      └─index
│  │              app.js
│  │              app.vue
│  │              
│  ├─style //        ，          ，         reset.less，             
│  │  │  index.less
│  │  │  
│  │  └─core
│  │          index.less
│  │          reset.less
│  │          
│  └─utils //    js    
│      └─core
│              http.js // http    ，   axios，     
│              
└─tests //     ，   
    └─unit
            .eslintrc.js