vue-cli 3.0.x を webpack4 にアップグレードした後の新機能は何ですか?

今回は、webpack4 にアップグレードした後の vue-cli 3.0.x の新機能と、webpack4 にアップグレードした後の vue-cli 3.0.x の 注意事項 について説明します。以下は実践的なケースです。 、見てみましょう。

プロジェクトは最近最適化されています。時間があったのでvue-cli3.0.xの使い方を調べてみました。かなりいい感じです。 前のプロジェクトでは vue-cli 2 を使用していたため、 eslint の使用を強制すると、プロジェクトに関係のない一部の「ビルド」や「構成」が不快に感じられます。 。企業環境が多いため、テスト環境の構築が必要です。 「"tt": "node build/tt-build.js"」を追加しました。 3.0.x へ どのように使用すればよいでしょうか? これらの問題を念頭に置いて 3.0.x を検討する方がはるかに良いと感じます。

1.公式サイト情報

技術を学ぶ際には必ず公式サイトの情報を確認してください。そこの情報が一番早く更新されるからです。

vue-cli
vue-cli ドキュメント

2. インストール環境

ここでは、npm install -g @vue/cli を使用することをお勧めします。yarn global add @vue/cli を使用して、他の設定を行い、いくつかのファイルを生成します。それらは数分で削除されます。

りー Yarn global add @vue/cli を使用してインストールする場合は、ディレクトリを入力する必要があります。

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project

を実行します

3. マルチ環境構成

なぜなら、同社には開発環境、テスト環境、共同デバッグ環境、オンライン環境があるからです。手動構成を減らし、一度構成します。そこで「package.json」が2.0.xで追加されました。 "tt": "node build/tt-build.js"" タイプの構成では多くのファイルを構成できません。vue-cli 3.0.x でサポートされています。 「.env」ファイル構成。ここに「.env.development」、「.env.production」、および「.env.test」構成を追加しました。 。

1.基本的な対応とデフォルト

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。

2. 指定された構成で開始します

他の構成を追加するには、以下の構成を指定する必要があります。

りー

3.”.env”

設定ファイル

書き込み中

設定ファイルの内容の形式は次のとおりです。

  development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test

例: 「.env.production」の内容は次のとおりです

"dev-build": "vue-cli-service build --mode development",

4. 環境構成を調整します

 VUE_APP_*

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue設定でローカルjsonデータをリクエストする方法

pandas+dataframeで行と列の選択とスライス操作を実装

selenium+cookieスキップ検証コードログイン実装手順の詳細な説明

以上がvue-cli 3.0.x を webpack4 にアップグレードした後の新機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。