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 を使用して物流の進行状況のスタイルを実装するためのサンプルコード

推薦する

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

CSSページ下部固定を実現する8つの方法の詳細な説明

ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...

Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル

Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...

Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同...

Dockerfile テキストファイルの使用例の分析

Dockerfile は、イメージをビルドするために使用されるテキスト ファイルです。テキスト コン...

波効果を作成するための CSS のトリック

純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。 波形曲線を実現するにはベ...

Docker コンテナに TensorRT をインストールする際の問題

Ubuntu にインストールされているバージョンをアンインストールします。 sudo apt-get...

Ubuntu で中国語入力方法が使えない場合の解決策

Ubuntu では中国語入力方法の解決策はありません。仮想マシンや Ubuntu システムをインスト...

Nginx インストール エラーの解決方法

1. nginx-1.8.1.tar.gzを解凍する2. fastdfs-nginx-module-...

Linux環境でのActiveMQ導入方法の詳しい説明

この記事では、Linux 環境での ActiveMQ の展開方法について説明します。ご参考までに、詳...

JavaScript関数の使い方の詳細な説明

目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

MySQL 5.7.18 無料インストール版ウィンドウ設定方法

初めてのブログです。データベースの勉強を始めた頃のことを書いています。自分でダウンロードしたのですが...

ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...

あまり一般的ではないが便利な CSS 属性操作の完全ガイド

1. カスタムテキスト選択 ::選択{ 背景: 赤; 色: 黒; } 2. ビデオコントロールからダ...