Vue CLI3 の詳細

Vue CLI は、Vue.js プロジェクトを構築するためのシンプルで強力なツールです。これにより、さまざまなビルド ツールが適切なデフォルト設定でスムーズに実行されるようになり、構成との格闘に時間を費やすことなく、アプリケーションの作成に集中できます。

Vue CLI 3 は、これまでの Vue エコシステムで最も優れたものであり、その理由は次のとおりです:

1. プラグインベースのアーキテクチャ

新しい CLI は、いわゆるプラグインベースのアーキテクチャを実装しています。これは、テンプレートベースのアーキテクチャを使用していた以前のバージョンに比べて大幅に改善されています。

これは、テンプレートが 1 つだけになり、必要な他の機能はすべてプラグインとして追加されることを意味します。

2. 柔軟性

新しい CLI を使用すると、必要な機能をすべて考慮する必要がなく、新しいプロジェクトを非常に簡単に開始できます。将来。

プロジェクトを作成して直接コードを作成し、機能が必要なときに追加するだけです。

3. ゼロ構成のラピッド プロトタイピング

この方法では、HTML ファイルを処理するのと同じように、vue アプリケーションやコンポーネントを提供できます。

4、Vuex

新しい CLI を使用すると、以前のバージョンで Vue Router を追加したのと同じように、プロジェクトに Vuex を追加できます。

5. Typescript

公式 cli は、typescript vue.js アプリケーションの起動をサポートするようになりました

6. カスタム プラグイン

CLI 公式プラグインが十分に完成していない場合は、独自のカスタム プラグインを作成できます (もちろん、プラグインを公開することもできます)。他の人が使用できるようにします）。

Vue CLI のインストール 3

CLI をインストールするには、次のコードを実行します。

npm install -g @vue/cli

これにより、Vue CLI の最新バージョンがインストールされます。完了したら、次のコマンドを実行して、インストールされているバージョンを確認できます。

vue -V

Change CLI Command

以前のバージョンと比較すると、 CLI コマンドがわずかに変更され、新しいコマンドがグッズ パックに追加されました。

• vue create myprojectmyproject という名前の新しいプロジェクトを作成します。

• vueserve 2334ac29606bf8a170583e4f7533b1f4設定なしで開発モードで .js または .vue ファイルを提供します。

• vue build 2334ac29606bf8a170583e4f7533b1f4 構成を必要とせずに、.js または .vue ファイルから本番環境に対応したバンドルを構築します。

• vue invoke b108d3c63ecc7cd3decca5e90ebe558fインストールされたプラグイン ジェネレーターを呼び出して、プラグインが適切に動作するために必要なファイルを作成します。

• vue Inspection は、完全に抽象化されているため、アプリケーションの Webpack 構成を表示します。

• #Vue init は、古いバージョン 2 を引き続き使用したいユーザーのために予約されていますが、このコマンドを使用するには、グローバル ブリッジをインストールする必要があります

これを行うには、ターミナルで次のコードを実行します。

npm install -g @vue/cli-init

インストール完了後。いつでもバージョン 3 内で直接バージョン 2 の使用を開始できるようになりました。

vue init webpack newapp

新しいプロジェクトの作成

新しいプロジェクトを作成するには、ターミナルで次のコードを実行します

vue create projectname

Where

projectname は、作成するアプリケーションの名前です。

プリセット、デフォルトのプリセット (

babel および eslint 構成を含む) を選択するか、必要な機能を手動で選択するよう求められます。

デフォルトのプリセットを選択すると、CLI によってプロジェクトが作成され、プロジェクトを起動して実行するために必要なプラグインがインストールされます。

機能を手動で選択することを選択した場合、CLI は引き続きサポートされているすべてのプラグインを表示し、プロジェクトに追加するプラグインを選択するよう求めます。

選択するには、スペースバーまたはキーボードの A キーを使用してすべてのプラグインを選択します。

終了したら、Enter キーを押して続行します。

選択したプラグインに応じて、追加のプロンプトが表示されます。必要なものを選択し、Enter キーを押して、CLI を終了します。

新しい CLI の優れた機能の 1 つは、プロジェクトを作成すると、コンピューター上にプロジェクトの新しいリポジトリも自動的に作成されることです。

#すぐに使えるプラグインのサポート

Typescript
1. @vue/typescript

プログレッシブ Web アプリケーション (PWA)
2. @vue/pwa

Vue ルーター
Vuex
CSS プリプロセッサ (postcss、css モジュール、sass、less、stylus)
リンター/フォーマッター
6. @vue /eslint

単体テスト
7. @ vue/mocha

   または @ vue/jest

##E2E テスト
8. @ vue / cypress

   または @ vue / nightwatch

##デフォルト値

CLI を使用して新しいプロジェクトを作成し、機能を手動で選択すると、プリセットが作成されます。

CLI使用此创建的预设来创建项目文件。

它使用JSON编写，包含创建新应用时选择的所有功能。

预设可以重复使用，从而使您可以轻松地直接跳入应用程序，而无需在创建将来的应用程序时经历整个功能选择过程。

要使用CLI从先前保存的预设创建新项目，请将目录更改为预设的位置，然后运行以下代码

vue create -p presetname newproject

这将使用指定的预设文件来创建名为newproject的项目名称。

将CLI插件添加到现有项目

要将插件添加到已创建的项目中，只需运行以下命令

vue add @vue/pwa

其中@ vue / pwa是要添加的插件的名称，在这种情况下为Progressive Web App插件。

需要注意的一件事是，新的CLI现在接受软件包的简写名称，例如@ vue / pwa是CLI软件包@ vue / cli-plugin-pwa的简写。

CLI将名称@ vue / value解析为@ vue / cli-plugin-value以安装软件包。

Zero-config快速原型

新的CLI使得使用vue serve和vue build命令以开发或生产模式仅提供.vue或.js文件变得非常容易。

如果您只想测试自己的想法，而又不想打扰配置，那么这是完美的选择。

要使用此命令，您必须首先安装vue CLI全局服务。

为此，只需在您的终端中运行以下代码。

npm install -g @vue/cli-service-global

安装完成后，您可以使用vue serve或vue build。

服务视图

vue serve app.vue

其中app.vue是要提供服务的组件或文件的名称。

serve命令还提供了一个选项，可以在运行完命令后启动浏览器，而不仅仅是向您显示当前正在向其提供应用程序的网址。

为此，请运行vue serve -o app.vue

Vue build

vue build app.vue

其中app.vue是要提供服务的组件或文件的名称。

vue build命令将构建可用于生产环境的捆绑软件，它还允许您指定是将其构建为库还是Web组件。

要构建为库，请使用vue build -t lib app.vue，而要构建为Web组件，请使用vue build -t wc app.vue。

环境变量

新的CLI现在允许您在项目根目录中使用.env文件来使用环境变量。

该文件由键=值对组成。

每个人至少需要管理2个环境，这意味着我们需要为此环境指定变量。

为了有效地做到这一点，CLI引入了我们所说的模式。

模式只是环境的别称，它指定您是处于开发，生产还是测试模式。

创建仅由特定模式使用的变量。 您必须将模式名称作为后缀添加到.env文件名中。

.env.development用于开发模式，.env.production用于生产模式。

注意：要使CLI将变量嵌入客户端捆绑软件代码中，该变量必须以VUE_APP_名称为前缀。

现在添加变量seckey变为VUE_APP_SECKEY

调整Webpack配置

Vue CLI提供了一种非常简单灵活的方法来调整内部Webpack配置。

为此，您必须在vue.config.js中使用configureWebpack选项

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

以防万一您在项目根目录中没有vue.config.js文件。 您将必须手动创建它。

您可能想知道：“我如何知道内部Webpack配置中已经存在的内容，所以我知道需要添加什么？”

好了，这是vue inspect命令变得方便的地方。

此命令将所有内部Webpack配置输出到您的终端。

要将其输出到文件，只需指定这样的文件名

vue inspect > output.js

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上がVue CLI3 の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。