vue-cli 3足場の使用と関連構成

前言
@vue/cliでインタラクティブなプロジェクト足場を構築します.@vue/cli+@vue/cli-service-globalでゼロ構成プロトタイプ開発を迅速に開始します.実行時依存(@vue/cli-service)

   ；
   webpack   ，          ；
                ；
          。

豊富な公式プラグインの集合で、先端生態の中で最高のツールが統合されています.完全にグラフィック化されたVueの作成と管理jsプロジェクトのユーザーインタフェース.Vue CLIはVue生態におけるツールの基礎標準化に力を入れている.さまざまなコンストラクションツールが、インテリジェントなデフォルト構成に基づいてスムーズに接続できることを保証します.これにより、構成の問題に何日もこだわることなく、アプリケーションの作成に集中できます.同時に、ejectを必要とせずに各ツールに構成を調整する柔軟性も提供します.
プロジェクトをすばやく作成

vue-cli 3をインストールします.

注意vue-cli 3はnodeバージョン8以上、(推奨8.10.0+)インストールコマンドnpm install–g@vue/cliまたはcnpm install–g@vue/cliまたはyarn global add@vue/cliがインストールに成功したかどうかを検出します.

プロジェクトの作成:

vue create hello-world
最初に作成したときは、babelとeslintを含むdefalutがデフォルトの2つのオプションの後にあるはずです.Manually select featuresは、必要なプラグインを手動で選択できます.demoは著者が以前に構成した、残された構成である.
上下矢印を押して構成を選択し、スペースキーを選択し、選択が完了すると、Enterキーを押して続行し、選択したプラグインの構成を順に尋ねます.
vue-router選択モード
使用したcss前処理言語はsassを選択しました.
選択したコードスタイルとフォーマットチェック
コードチェック方式は、保存即ちチェックを選択し、addとcommitの時にチェックすることもできます.
これらのプラグインの構成を保存する場所、独立したファイルを選択しました.
将来多重化可能なpresetとして保存するかどうか.選択が完了したら、プラグインのインストールを開始します.
インストールが完了したプロジェクトディレクトリを確認します
インストールが完了したら、cd hello-world、フォルダに入り、npm run serveはプロジェクトを起動します.グラフィックスインタフェースを使用して、vue uiコマンドを使用してグラフィックスインタフェースでプロジェクトを作成および管理することもできます.
重点的な説明をしない.
vue.config.js
apiのアドレス構成参照#プロジェクトの構築が完了しました.vue-cli 3のプロジェクトの初期化のため、開発者は80%を解決し、ほとんどの場合のwebpack構成を解決しました.しかし、開発の過程で開発者が自分で構成する必要があるものに遭遇するのは避けられません.では、私たちはどのように構成するか、この点はプロジェクトのルートディレクトリの下で手動でvueを新規作成する必要があります.config.js、ここで私が提供した私たちのプロジェクトでよく使われているテンプレートです.以下のオプションについて大まかな説明をします.

const path = require('path')
const webpack = require('webpack')
module.exports = {
  //   output.path
  outputDir: 'dist',
  //   output.publishPath
  baseUrl: './',
  chainWebpack: config => {
    //     scss  
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => {
      config.module.rule('scss').oneOf(type).use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns: [
            path.resolve(__dirname, 'src/css/base.scss')
          ]
        })
    })
    //    prefetch    //   
    config.plugins.delete('prefetch')
    //   
    const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
    config.plugin('dll-reference-plugin')
      .use(webpack.DllReferencePlugin)
      .tap(options => {
        options[0] = {
          context: __dirname,
          manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
        }
        return options
      })
    config.plugin('add-asset-html-webpack-plugin')
      .use('add-asset-html-webpack-plugin')
      .tap(options => {
        options[0] = {
          filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
        }
        return options
      })
  }
}

BaseUrl:Vue CLI 3.3から破棄されました.publicPathpublicPathを使用してください.

Type: string
Default: '/'
          URL。    webpack     output.publicPath   ，   Vue CLI                ，        publicPath         webpack   output.publicPath。     ，Vue CLI                      ，   http://shop.ktvsky.com/。              ，                。  ，           http://shop.ktvsky.com/vue/，    publicPath   /vue/。
          './',                   
         

絶対パス
outputDir

Type: string 
Default: 'dist'
    vue-cli-service build                。                (      --no-clean       )。

chainWebpack次の記事でchainWebpackの使用について詳しく説明しますhttps://segmentfault.com/a/11...;公式ドキュメントhttps://cli.vuejs.org/zh/guid...