vue-cli の紹介とインストール

vue-cli の紹介とインストール

1. はじめに

vue-cli vueと深く統合されたツールです。vue プロジェクトvue素早く作成し、スキャフォールディング関連のコードを作成するのに役立ちます。実際に vue を使用してプロジェクトを開発する場合は、 vue-cliを使用してプロジェクトを作成します。

2. vue-cli の紹介

Vue CLIVue.jsをベースにした迅速な開発のための完全なシステムであり、以下を提供します。

  • @vue/cliによって実装されたインタラクティブなプロジェクト スキャフォールディング。
  • @vue/cli + @vue/cli-service-globalを通じてゼロ構成のプロトタイプ開発を実現しました。
  • 次のランタイム依存関係(@vue/cli-service), :
  • (1)アップグレード可能
  • (2)適切なデフォルト設定でwebpack上に構築されている。9
  • (3)プロジェクト内の設定ファイルを通じて設定できる。
  • (4)プラグインによる拡張が可能。
  • フロントエンド エコシステムで最高のツールを統合する公式プラグインの豊富なコレクション。
  • Vue.jsプロジェクトを作成および管理するための完全なグラフィカル ユーザー インターフェイス。

Vue CLI Vueエコシステムにおけるツール基盤の標準化に取り組んでいます。インテリジェントなデフォルト構成に基づいてさまざまなビルド ツールをスムーズに接続できるため、構成の問題を心配して何日も費やすことなく、アプリケーションの作成に集中できます。同時に、 ejectことなく各ツールの構成を調整する柔軟性も提供します。

2.1 コマンドライン

CLI (@vue/cli)ターミナルでvueコマンドを提供する、グローバルにインストールされるnpmパッケージです。 vue createを通じて新しいプロジェクトを素早く構築したり、 vue serveを通じて新しいアイデアのプロトタイプを直接構築したりできます。また、 vue uiを使用してグラフィカル インターフェイスを通じてすべてのプロジェクトを管理することもできます。

2.2 CLI サービス

CLI (@vue/cli-service)は開発環境の依存関係です。これは@vue/cliによって作成されたすべてのプロジェクトにローカルにインストールされるnpmパッケージです。
CLIサーバーはwebpackwebpack-dev-server上に構築されます。内容は次のとおりです。

  • 他のCLIプラグインを読み込むためのコア サービス。
  • ほとんどのアプリケーションに最適化された内部webpack構成。
  • プロジェクト内のvue-cli-serviceコマンドは、 servebuild 、およびinspectコマンドを提供します。

2.3 CLIプラグイン

CLIプラグインは、 Babel/TypeScriptトランスパイル、 ESLint統合、ユニット テスト、 end-to-endテストなど、Vue プロジェクトにオプションの機能を提供する npm パッケージです。 Vue CLIプラグインの名前は@vue/cli-plugin- (組み込みプラグイン) またはvue-cli-plugin - (コミュニティ プラグイン) で始まり、非常に使いやすいです。

プロジェクト内でvue-cli-serviceコマンドを実行すると、 package.jsonにリストされているすべてのCLIプラグインが自動的に解決され、読み込まれます。

プラグインは、プロジェクト作成プロセスの一部として作成することも、後の段階でプロジェクトに追加することもできます。再利用可能なpresetのセットにグループ化することもできます。

3. @vue-cli インストール

Vue CLI 4.xにはNode.js v8.9以上が必要です (v10 以上を推奨)。 nnvm 、またはnvm-windowsを使用して、同じコンピューター上で複数の Node バージョンを管理できます。

インストールコマンドは次のとおりです。

npm インストール -g @vue/cli

このコマンドを使用してバージョンが正しいかどうかを確認できます

vue --バージョン

vue-cli の導入とインストールに関する記事はこれで終了です。より関連性の高い vue-cli の導入とインストールのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue cli3 をグローバルにインストールし、Vue-cli2.x を引き続き使用します。
  • Vue-CLI の複数のバージョンをインストールする方法
  • [email protected] のインストール失敗の問題を解決し、ts-vue プロジェクトをビルドします
  • vue-cli スキャフォールディングのインストールの詳細な説明
  • vue-cli でのインストール方法 (画像とテキストによる詳細な手順)
  • vue-cli のインストールと使用の詳細な手順
  • npm で vue と vue-cli をインストールし、webpack でプロジェクトを作成する方法
  • Vue-cli スキャフォールディング インストール チュートリアル図
  • vue-cli のインストール時に発生するエラー -4058 の解決方法
  • Vue 学習ノート vue-cli のインストールと紹介の上級バージョン

<<:  MySQLログシステムの使い方に関する簡単なチュートリアル

>>:  CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

推薦する

Linux で複数の mysql5.7.19 (tar.gz) ファイルをインストールする方法

LinuxでのMySQL-5.7.19バージョンの初心者向けの最初のインストールについては、前の記事...

CSSの固定位置属性の詳細な説明

モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部を...

JavaScript でツリー構造を構築するための効率的なアルゴリズムについての簡単な説明

目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...

JS はデータ URL をどのように理解するのでしょうか?

目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...

Vue はタブ ラベルを実装します (ラベルが自動スクロールを超える)

作成されたタブラベルがページの表示領域を超えると、タブラベルの距離だけ自動的にスクロールされます。ま...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

win10 で mysql8.0.23 をインストールし、「サービスが制御機能に応答しません」という問題を解決する方法

Windows10にmysqlをインストールする1. 公式サイトからMySQLをダウンロードするウェ...

JavaScript の for ループと二重 for ループの詳細な説明

forループfor ループは配列の要素をループします。文法: for (初期化変数; 条件式; 繰り...

ホバープロンプトにはvue2+elementuiを使用する

Vue2+elementui のホバー プロンプトは、外部と内部に分かれています。内部のものは el...

MySQL メタデータで Hive テーブル作成ステートメントのコメント スクリプトを生成する方法

序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...

CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)

フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという...

IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法

IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...

HTMLの水平線注釈とコードコメントの使い方をマスターするだけです

水平線<hr /> タグを使用して、現在の位置に水平の分割線を描画します。例: XML/...

Windows に WSL をインストールして構成する方法

WSLとはBaidu 百科事典からの一節を引用します。 Windows Subsystem for ...