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

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

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/app すべてのBabel構成Vueを実行する必要があるパッケージ。ただし、それでも微調整して、必要な他の構成を追加することができます。

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

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

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

npmスクリプト

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

これはのおかげで起こります vue-cli-service、package.jsonファイルのnpmスクリプトで使用されます。内部的には、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 開発中の特定のURLにいくつかの呼び出しを転送するために、package.jsonファイルにオブジェクトを追加します。

package.json

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

そうすれば、 /\/api/ パターンはhttp：// localhost：4000に転送されます

vue.config.jsファイル

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

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

vue.config.js

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

おもう lintOnSave すでにそれ自体でかなり説明的です。

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

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

涼しくしてください🦄

getdocs

13036