VueCLIのデコード

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

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 –open は、開発サーバーのポートに対してデフォルトのブラウザーを開きます
-c –copy は、開発サーバーのURLをクリップボードにコピーします
-p –port は、単一の引数 port を使用して、開発サーバーのポートを指定します。デフォルトは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
}

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

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

getdocs

13036