新しいvue-cli3を使用してVue.jsアプリをスキャフォールドする

提供:Dev Guides
移動先:案内検索

vue-cliバージョン3は、まったく新しい開発者エクスペリエンスをもたらします。 Vueチームは、Vue.jsプロジェクトの作成がスムーズであり、初期構成が不要であることを確認するために多大な努力を払いました。 同時に、プロジェクト構成を簡潔かつ簡単な方法で拡張および微調整することも可能になります。

新しいvue-cliのいくつかの機能を見てみましょう。

この記事の執筆時点では、vue-cliのv3はまだアルファ版です。


入門

まず、それをインストールする必要があります:

$ npm install -g @vue/cli

ご覧のとおり、Vue.jsはスコープ付きパッケージを使用して、@vue名前空間でパッケージを配布しています。

次に、以下を実行してプロジェクトを簡単に作成できます。

$ vue create cli-test # cli-test is just any folder name

これにより、デフォルトの構成( eslint babel )が必要かどうか、または次のような機能を追加するかどうかを尋ねるプロンプトが表示されます。

  • TypeScript
  • プログレッシブウェブアプリのサポート
  • Vueルーター
  • Vuex
  • CSSプリプロセッサ
  • リンター/フォーマッター
  • ユニットテスト
  • エンドツーエンドのテスト

選択したオプションに応じて、さらに多くの質問が表示されます。 自分に最適なものを選択してください。 完了すると、依存関係のインストールが開始され、プロジェクトの準備が整います。

構成

vue-cliはいくつかの構成を作成する必要があります。 デフォルトの構成はpackage.jsonに作成され、次のようになります。

package.json

{
  // ...
  "vue": {
    "lintOnSave": true
  },
  "babel": {
    "presets": [
      "@vue/app"
    ]
  },
  "eslintConfig": {
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Vueを実行するために必要なすべてのBabel構成を備えた新しい@vue/appパッケージを見ることができます。 ただし、それでも微調整して、必要な他の構成を追加することができます。

eslint configに従って、スタイルガイドに続くVueの推奨ルールセットを持つplugin:vue/essentialが含まれています。 さらに、eslint:recommendedも含まれていますが、好みによって異なる場合があります。 たとえば、eslintとprettierを選択した場合は、代わりに@vue/prettierを取得します。

機能を手動で選択した場合は、設定を個別のファイルに入れるようにCLIに指示できます。 これにより、 .babelrc .postcssrc jest.config.js tslint.json 、等 package.json から構成を削除し、それぞれの構成ファイルに移動することで、いつでも構成をファイルに移動できます。

オプションを手動で選択すると、その構成を将来のプロジェクトのプリセットとして保存するかどうかを尋ねられます。 その構成は、ある時点で変更する必要がある場合に備えて、〜/.vuercに保存されます。

npmスクリプト

箱から出してすぐに、ベストプラクティスに従ってすでにセットアップされているゼロ構成の開発および本番環境を利用できます。 開発環境にはホットモジュールのリロード、高速ビルドなどがあり、本番環境ではミニファイ、モジュールの連結、コードの最適化などが提供されます。

これは、package.jsonファイルのnpmスクリプトで使用されるvue-cli-serviceのおかげで発生します。 内部的には、vue-cli-serviceにはさまざまな環境に対応したwebpack構成があります。

デフォルトで使用できるスクリプトは次のとおりです。

  • serve :「vue-cli-serviceserve--open」
  • build :「vue-cli-servicebuild」
  • lint :「vue-cli-servicelint」。 手動で実行する必要はありません。保存時またはコミット前にlintを選択した場合は、自動的に実行できます。

さらに機能を追加すると、いくつかの追加のスクリプトを取得できます。

  • test :「vue-cli-servicetest」
  • e2e :「vue-cli-servicee2e」
  • e2e-open :「vue-cli-servicee2e:open」

npm runを使用して、これらのいずれかを実行できます。 例:npm run serveは開発サーバーを起動します。

環境変数

vue-cliは、12ファクターアプリで提案されている従来の.envファイルを使用します。 これにより、標準の規則に従い、他のシステムとの相互互換性が確保されます。

.envファイルは次のように定義できます。

.env

VUE_APP_BASE_URI=/api
VUE_APP_DEBUG=true

`VUE_APP_`で始まる変数のみがロードされます。 正しく名前を付けてください。


また、たとえばprocess.env.VUE_APP_BASE_URIを使用してロードされ、使用可能になります。

環境ごとに環境変数を定義することもできます。 そのためには、NODE_ENV変数から取得した適切なサフィックスを追加する必要があります。

  • .env.development
  • .env.production
  • .env.test

これらは、ベース.env値をオーバーライドします。 たとえば、前の例から、環境に基づいてVUE_APP_DEBUGを定義することをお勧めします。

.env.development

VUE_APP_DEBUG=true

.env.production

VUE_APP_DEBUG=false

プロキシー

proxyオブジェクトをpackage.jsonファイルに追加して、開発中の特定のURLに一部の呼び出しを転送することにより、プロキシを構成できます。

package.json

{
  "proxy": {
    "/api": "http://localhost:4000"
  }
}

これにより、/\/api/パターンに一致するすべての呼び出しが、 http:// localhost:4000に転送されます。

vue.config.jsファイル

デフォルトでは、 package.jsonvue構成キーがありますが、その構成をvue.config.jsファイルに移動できます。

vue.config.js ファイルは、アプリを構成することを目的としています。 今のところ、使用できるプロパティはすでにいくつかありますが、このファイルが今後の機能またはプラグインのターゲットになると予想されます。

vue.config.js

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    output: {
      path: __dirname + "/cool-build"
    }
  }
};

lintOnSaveはそれ自体ですでにかなり説明的だと思います。

configureWebpackキーを使用すると、内部のデフォルトのWebpack構成を変更できます。 これは非常に強力です。デフォルトでは、構成がまったくなくても、さまざまな環境で最も一般的な機能がセットアップされているからです。 ただし、必要な場合は、このキーを使用して微調整できます。 この例では、デフォルトで/distに設定されている出力パスを変更しています。

configureWebpackオブジェクトは内部オブジェクトとマージされます。 構成を引数として受け入れる関数を使用することもできます。

vue.config.js

module.exports = {
  configureWebpack: config => {
    // ...
  }
};

CLIプラグインの追加

プラグインを使用して、基本的なデフォルト構成から開始し、機能を追加することができます。 それらはすべて同じように機能します。インストールしてから呼び出すと、魔法がかかります。

たとえば、プログレッシブWebアプリ(PWA)機能が必要であり、プロジェクトの作成時にそれを選択しなかったとします。 追加するのは次のように簡単です。

$ npm install @vue/cli-plugin-pwa
$ vue invoke pwa # you don't need the @vue/cli-plugin- prefix

プラグインは、呼び出されたときにオプションを持つこともできます。 たとえば、cli-plugin-eslintは、次の引数を使用して呼び出すことができます。

$ vue invoke eslint --config airbnb --lintOn save

まとめ

新しいvue-cliの概要を見てきました。 明確に定義されたアーキテクチャを備えているため、ゼロ構成から始めても拡張可能です。 プロキシや環境変数の設定など、通常のケースについても説明します。 将来的にはもっとクールな機能とプラグインを期待してください。

涼しくしてください🦄