vue-cli 3.0.x の詳細な紹介

今回は vue-cli 3.0.x について詳しく説明します。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 を使用することをお勧めします。その他の設定、生成されたいくつかのファイルの削除も数分間行う必要があります。

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

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

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

3. マルチ環境構成

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

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

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

2. まずは設定を指定します

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

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

3.".env"

設定ファイルを書き込みます

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

 VUE_APP_*

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

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. 環境設定を調整します

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

あなたはそれを読んだと思います。この記事の場合の方法はマスターしました。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

複数の配列を結合するときに重複データを削除する方法

アップロードされた画像のタイプとサイズを決定するために必要な手順

以上がvue-cli 3.0.x の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。