vue-cli 3.0.xを使用する手順の詳細な説明

今回は、vue-cli 3.0.x の使用手順について詳しく説明します。vue-cli 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"」タイプの構成が追加され、多くのファイルを構成できませんでした。 vue-cli 3.0.x では、「.env」ファイル構成がサポートされています。ここでは「.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 サイトの他の関連記事に注目してください。

推奨書籍:

カスタム ライブラリを開発する方法

JS を使用して再計算のために複数の配列をマージする方法

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