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

推薦する

CSS3でよく使われるスタイルの詳しい解説[基本的なテキストとフォントのスタイル]

概要: Web ページをより美しく見せるために、ここでは CSS3 でよく使用されるスタイルをいくつ...

Docker は 2003 年の問題を解決するために MySQL リモート接続を導入しました

MySQLへの接続ここでは、リモート接続に navicat を使用します。MySQL に接続する前に...

CSSは左固定と右適応のレイアウト方法を実現します

1. フローティングレイアウト1. 最初に固定幅の div をフロートさせます。ドキュメントフローか...

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

HTMLの基礎を詳しく解説(第2部)

1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...

js 正確な計算

var numA = 0.1; var numB = 0.2; アラート(numA + numB)...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

docker compose を使用してハーバープライベートウェアハウスをインストールする詳細なチュートリアル

概要港とは何ですか?英語の単語の意味は「港」です。 Harborはコンテナ(貨物)を保管するために使...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

MySQLテーブルの内容の変更を監視し、MySQL binlogを有効にする

序文binlog は、MySQL のすべての追加、削除、および変更ステートメントを記録するバイナリ ...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...