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

推薦する

Docker を使用した ELK7.3.0 ログ収集サービスの導入に関するベスト プラクティス

最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...

CSS を使用して複数の方法で等幅レイアウトを実装するサンプルコード

この記事で説明する等幅レイアウトでは、純粋な CSS を使用して、要素の幅を手動で設定することなく、...

シンプルなカルーセル効果を実現するJavaScript

カルーセルとは何ですか?カルーセル: モジュールまたはウィンドウで、コンピューターでマウスをクリック...

Vuexの特性と機能の詳細な説明

目次Vuex とは何ですか? Vuexの5つの特性vuex の State 機能とは何ですか? vu...

MySQLカスタム変数の概念と特徴

MySQL カスタム値は、値を保存するための一時的なコンテナです。サーバーへの接続がアクティブである...

JSはクリックドロップ効果を実装します

jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...

XHTML タグのネスト規則の分析

XHTML 言語では、ul タグに li が含まれ、dl タグに dt と dd が含まれることは誰...

15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...

MySQLデータベースがNULLを可能な限り避ける理由

MySQL の多くのテーブルには、NULL が列のデフォルト属性であるため、アプリケーションが NU...

Vueはシンプルな画像切り替え効果を実装します

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 コー...

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

Apache Bench ストレステストツールの実装原理と使用状況分析

1: スループット(1秒あたりのリクエスト数)サーバーの同時処理能力を定量的に表したもので、reqs...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

ブラウザ(IEシリーズ)を判別するための条件付きコメント

<!--[if IE 6]> IE6 のみが認識可能 <![endif]-->...