Vue.js CLI:使用方法を学ぶ

Vueは非常に印象的なプロジェクトであり、フレームワークのコアに加えて、Vueプログラマーの生活を楽にする多くのユーティリティを維持しています。それらの1つはVueCLIです。


Vueは非常に印象的なプロジェクトであり、フレームワークのコアに加えて、Vueプログラマーの生活を楽にする多くのユーティリティを維持しています。

それらの1つはVueCLIです。

CLIはコマンドラインインターフェイスの略です。

注:現在、バージョン2から3に移行するCLIの大幅な改良が行われています。まだ安定していませんが、バージョン3は、バージョン2と比べて大幅に改善されており、まったく異なるため、ここで説明します。

インストール

Vue CLIはコマンドラインユーティリティであり、npmを使用してグローバルにインストールします。

npm install -g @vue/cli

または糸を使用して:

yarn global add @vue/cli

そうしたら、を呼び出すことができますvueコマンド。

Vue CLIは何を提供しますか?

CLIは、Vue.jsの迅速な開発に不可欠です。

その主な目標は、必要なすべてのツールが機能していることを確認し、必要なことを実行し、各ツールを個別に使用するために必要なすべての本質的な構成の詳細を抽象化することです。

プロジェクトの初期設定と足場を実行できます。

これは柔軟なツールです。CLIを使用してプロジェクトを作成すると、構成を調整する必要がなく、構成を調整できます。イジェクトあなたのアプリケーション(あなたがするようにcreate-react-app)。

create-react-appからイジェクトすると、必要なものを更新および微調整できますが、create-react-appが提供する優れた機能に依存することはできません。

何でも設定でき、それでも簡単にアップグレードできます。

アプリを作成して構成すると、webpack上に構築されたランタイム依存関係ツールとして機能します。

CLIとの最初の出会いは、新しいVueプロジェクトを作成するときです。

CLIを使用して新しいVueプロジェクトを作成する方法

CLIで最初に行うことは、Vueアプリを作成することです。

vue create example

すばらしいのは、それがインタラクティブなプロセスであるということです。プリセットを選択する必要があります。デフォルトでは、BabelとESLintの統合を提供するプリセットが1つあります。

下矢印⬇️を押して、必要な機能を手動で選択します。

押すspace必要なものの1つを有効にしてから、を押しますenter進むために。リンター/フォーマッターを選択したので、VueCLIから構成の入力を求められます。 ESLint + Prettierを選んだのは、それが私のお気に入りのセットアップだからです。

次は、リンティングの適用方法を選択することです。私は選ぶ保存時にリント

次は、テストです。私はテストを選択しました。VueCLIでは、最も人気のある2つのソリューションであるMocha + Chai vsJestから選択することができます。

Vue CLIは、すべての構成をどこに配置するかを尋ねてきます。package.jsonファイル、または専用の構成ファイルで、ツールごとに1つ。私は後者を選びました。

次に、Vue CLIは、これらのプリセットを保存するかどうかを尋ねてきます。次にVue CLIを使用して新しいアプリを作成するときに、それらを選択肢として選択できるようにします。これは非常に便利な機能です。私のすべての設定をすばやくセットアップすることは、複雑さを軽減するためです。

次に、Vue CLIは、Yarnとnpmのどちらを使用するかを尋ねてきます。

それが私に尋ねる最後のことです、そしてそれは依存関係をダウンロードしてVueアプリを作成し続けます:

新しく作成したVueCLIアプリケーションを起動する方法

Vue CLIが私たちのためにアプリを作成しました、そして私たちはexampleフォルダと実行yarn serve開発モードで最初のアプリを起動するには:

スターターサンプルアプリケーションソースには、次のようないくつかのファイルが含まれています。package.json

これは、以下を含むすべてのCLIコマンドが定義される場所です。yarn serve、1分前に使用しました。他のコマンドは

  • yarn build、本番ビルドを開始します
  • yarn lint、リンターを実行します
  • yarn test:unit、単体テストを実行します

別のチュートリアルで、VueCLIによって生成されたサンプルアプリケーションについて説明します。

Gitリポジトリ

に注意してくださいmasterVS Codeの左下隅にある単語?これは、Vue CLIが自動的にリポジトリを作成し、最初のコミットを行うため、すぐにジャンプして変更を加えることができ、何を変更したかがわかります。

これはかなりクールです。結果をコミットしたいときに、初期状態をコミットしなかったことに気付くために、何回飛び込んで物事を変更しますか?

コマンドラインからプリセットを使用する

インタラクティブパネルをスキップして、特定のプリセットを使用するようにVueCLIに指示できます。

vue create -p favourite example-2

プリセットが保存される場所

プリセットはに保存されます.vuejsホームディレクトリのファイル。これが最初の「お気に入り」プリセットを作成した後の私のものです

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "favourite": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "router": true,
      "vuex": true
    }
  }
}

プラグイン

構成を読むとわかるように、プリセットは基本的にプラグインのコレクションであり、いくつかのオプションの構成があります。

プロジェクトが作成されたら、を使用してプラグインを追加できますvue add

vue add @vue/cli-plugin-babel

これらのプラグインはすべて、利用可能な最新バージョンで使用されています。 versionプロパティを渡すことで、VueCLIに特定のバージョンを使用させることができます。

"@vue/cli-plugin-eslint": {
  "version": "^3.0.0"
}

これは、新しいバージョンに重大な変更やバグがあり、使用する前に少し待つ必要がある場合に役立ちます。

プリセットをリモートで保存

プリセットを含むリポジトリを作成することで、GitHub(または他のサービス)にプリセットを保存できます。preset.json単一のプリセット構成を含むファイル。上記から抜粋して、サンプルプリセットを作成しましたhttps://github.com/flaviocopes/vue-cli-preset/blob/master/preset.jsonこの構成が含まれています:

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "prettier",
      "lintOn": [
        "save"
      ]
    },
    "@vue/cli-plugin-unit-jest": {}
  },
  "router": true,
  "vuex": true
}

これは、以下を使用して新しいアプリケーションをブートストラップするために使用できます。

vue create --preset flaviocopes/vue-cli-preset example3

Vue CLIの別の使用法:ラピッドプロトタイピング

これまで、Vue CLIを使用して、すべての機能を備えた新しいプロジェクトを最初から作成する方法について説明してきました。しかし、非常に迅速なプロトタイピングのために、単一の.vueファイルに自己完結しているものであっても、非常に単純なVueアプリケーションを作成し、すべての依存関係をダウンロードすることなく、それを提供できます。node_modulesフォルダ。

どうやって?最初にインストールしますcli-service-globalグローバルパッケージ:

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

//or

yarn global add @vue/cli-service-global

app.vueファイルを作成します。

<template>
    <div>
        <h2>Hello world!</h2>
        <marquee>Heyyy</marquee>
    </div>
</template>

その後、実行します

vue serve app.vue

The standalone app

You can serve more organized projects, composed by JavaScript and HTML files as well. Vue CLI by default uses main.js / index.js as its entry point, and you can have a package.json and any tool configuration set up. vue serve will pick it up.

Since this uses global dependencies, it’s not an optimal approach for anything more than demonstration or quick testing.

Running vue build will prepare the project for deployment in dist/, and generate all the corresponding code, also for vendor dependencies.

Webpack

Internally, Vue CLI uses webpack, but the configuration is abstracted and we don’t even see the config file in our folder. You can still have access to it by calling vue inspect:

Download my free Vue Handbook


More vue tutorials: