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

推薦する

JavaScript で実装された 6 つの Web ページ画像カルーセル効果の詳細な説明

目次1. マウスがカルーセル モジュール上を通過すると、左右のボタンが表示され、モジュールを離れると...

IEではボタンが両側に伸びる

ボタン (input, button) を記述すると、IE では次のようになります。単語数が増えると...

Discuz! フォーラムに設定オプションを追加する方法

Discuz! フォーラムにはバックグラウンドで多くの設定オプションがあり、これらの設定オプションを...

Web デザイン ヘルプ: Web フォント サイズ データ リファレンス

<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...

Vue の動的メニュー、動的ルートの読み込みと更新の落とし穴

目次必要:アイデア:レッスン:テキストを共有する:要約する必要:インターフェイスからサブメニュー デ...

nginxを使用して画像サイズを動的に変換し、サムネイルを生成します。

Nginx ngx_http_image_filter_module モジュール (nginx バ...

Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス) vuex を使用するだけでなく、vue 内の親子以外のコンポーネ...

Confluence と jira-software を Docker にデプロイする方法

バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...

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

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

Windows 10 での MySQL 8.0.11 圧縮バージョンのインストール チュートリアル

この記事では、MySQL 8.0.11圧縮版のインストールチュートリアルを参考までに紹介します。具体...

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

JavaScript の知識: コンストラクタも関数である

目次1. コンストラクタの定義と呼び出し2. 新しいキーワードの目的3. コンストラクタの問題: メ...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

MySQL シリーズ 12 バックアップとリカバリ

目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...