VueCLIのデコード

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

CLI（コマンドラインインターフェイス）の背後にある考え方は、より大きな出力を生成するために、シンプルで編集可能なコマンドを使用することです。 VueCLIも例外ではありません。 新しいプロジェクトが始まるとき、開発者が最後に心配すべきことはプロジェクトの足場です。 幸い、Vueチームは、スキャフォールディング、プロトタイピング、およびその他のさまざまな便利なコマンドを1つの簡単なCLIツールにバンドルしました。

インストール

npmまたはyarnが優先パッケージマネージャーであるかどうかにかかわらず、VueCLIのインストールプロセスは可能な限り単純です。 

#npm option
$ npm install -g @vue/cli

#yarn option
$ yarn global add  @vue/cli

新しい端末を開き、 vue コマンドを使用して、これが正しくインストールされていることを確認します。

CLIは、複数のプロジェクトで使用するためにグローバルにインストールされます。


プロトタイピング

インスタントプロトタイピングはVueCLIのコア機能の1つであり、開発者は.vueまたは.jsファイルをすばやく作成し、次のような他のビルドツールを構成しなくても作業をプレビューできます。 webpackおよびbabel。

この機能を使用するには、最初に追加のアドオンをインストールする必要があります。 

# npm option
$ npm install -g @vue/cli-service-global

# yarn option
$ yarn global add @vue/cli-service-global

完了したら、コンポーネントファイルを書き出し、そのディレクトリに移動してvue serve {YOUR_FILE_NAME}を実行すると、すぐにプレビューできます。

vue serveに渡すことができる追加のフラグは次のとおりです。

  • -o -開いた opens your default browser to the port of the development server
  • -c -コピー copies the URL of the dev server to your clipboard
  • -p -ポート takes a single argument ポート to specify the dev server port, defaults to 8080

足場

Vue CLIの主な利点の1つは、プロジェクトのセットアップとスキャフォールディングを処理し、フォルダー構造について心配する必要がないことです。

以下を実行すると、新しいプロジェクトのセットアッププロセスが開始されます。 

$ vue create my-new-project

次に、一連のプロンプトが表示され、このプロジェクトで好みの機能を選択できます。 これらの機能は次のとおりです。

  • バベル
  • TypeScript
  • PWAサポート
  • Vueルーター
  • Vuex
  • CSSプリプロセッサ
  • リンター/フォーマッター
  • ユニットテスト
  • エンドツーエンドのテスト

これに続いて、設定に関するいくつかの質問が続きます（以前に選択したものによって異なります）。

  • クラススタイルコンポーネントの構文
  • TypeScriptでBabelを使用する
  • ルーター履歴モード
  • SASS、LESS、またはスタイラス
  • ESLint構成
  • ユニットおよびE2Eテストソリューション
  • 専用の設定ファイルまたはpackage.json
  • 優先パッケージマネージャー

このすべての後で、これらの設定をプリセットとして保存することもできます。これにより、将来のプロジェクトでこれらの質問をスキップできます。

CLIよりもUIを優先しますか？ vue uiを実行して、GUIプロセスを起動します。


プラグイン

ほとんどのプラグインはスキャフォールディングプロセスによって自動的に処理されますが、プロジェクトの途中で別のプラグインを追加したい場合があります。 vue addを使用すると、既存のプロジェクトに新しいプラグインを簡単に挿入できます。

必要なものが見つかりませんか？ 利用可能なプラグインのこのリストを閲覧してみてください！

構成リファレンス

上記の設定に加えて、CLIはオプションの構成ファイルvue.config.jsも提供します。 このファイルを使用して、CLI内のオプションと内部Webpack設定を調整できます。

このファイルは、プロジェクトのトップレベルのpackage.jsonの隣にある必要があります


より重要な構成オプションのいくつか：

  • publicPath ：アプリが最終的にデプロイされるURL。 デフォルト値は'/'であるため、ドメインがmy-domain.comの場合、これはmy-domain.com/にデプロイされます。 これは、アプリがトップレベルドメインではなく、代わりにサブパス上にある場合に役立ちます。
  • outputDir ：ビルドファイルが生成されるディレクトリ。 デフォルトでは、これはdistです。
  • assertsDir ：静的アセットが配置されている場所。 これは、outputDirフォルダーに関連しています
  • ページ：Vueアプリは* SPA *（シングルページアプリケーション）である必要はありません。 このモードでは、指定されたエントリポイントごとにページが生成されます。 これは、それぞれが一意のentryを持つ各ページを含むオブジェクトである必要があります。 template, filename, title, chunkオプションも提供できますが、必須ではありません。

vue.config.jsファイルがどのように見えるかの簡単な例を次に示します。 

module.exports = {
  outputDir: 'public',
  // ...more options
}

利用可能なすべてのオプションのリファレンスはここにあります。


この構成オプションに渡すことができるさまざまな追加オプションがあります。 詳細については、公式ドキュメントをご覧ください。

「https://www.finddevguides.com/index.php?title=VueCLIのデコード&oldid=100764」から取得
Powered by MediaWiki