vueの3つのインストール方法

Vue は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。非常に柔軟性があり、さまざまなプラットフォームで使用できます。この記事では、ニーズに最も適したものを選択できるように、Vue の 3 つのインストール方法について説明します。

方法 1: CDN を使用する

CDN (Content Delivery Network) は、ネットワーク コンテンツへの高速アクセスを提供できる世界中に分散されたサーバーのグループです。 Vue は CDN 経由でインストールできます。

CDN から Vue を取得するには、次のリンクを HTML ファイルに追加する必要があります:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

このリンクは、無料でオープンな jsdelivr.com から Vue を取得します。ソースCDN。特定のバージョンの Vue が利用可能な場合は、リンク内でバージョン番号を明示的に指定できます。

上記のリンクを HTML ファイルに追加すると、Vue を使用できるようになります。 Vue インスタンスを定義し、DOM 要素にハングするだけです:

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

上記のコードは、<div> 要素に「Hello Vue!」を表示します。

方法 2: パッケージ マネージャーを使用する

パッケージ マネージャーは、コンピューターにソフトウェア パッケージをインストールおよび更新できるツールです。これらの中で最も一般的に使用されるのは、Node.js の npm パッケージ マネージャーです。

Vue をインストールするには、次のようにターミナルで npm コマンドを使用する必要があります:

npm install vue

このコマンドは Vue をダウンロードし、プロジェクトの依存関係に追加します。次に、JavaScript ファイルに Vue をインポートできます。

import Vue from 'vue'

インポート後、Vue インスタンスを定義し、それを DOM 要素にフックできます。

方法 3: Vue CLI を使用する

Vue CLI は、Vue プロジェクトを自動的にインストールおよび初期化できるコマンド ライン ツールです。 Vue CLI は、最新の Vue プロジェクトをカスタマイズして迅速に生成するためのさまざまなプラグインとテンプレートをサポートしています。

まず、npm を使用して Vue CLI をグローバルにインストールする必要があります:

npm install -g @vue/cli

インストール後、次のコマンドを使用して新しい Vue プロジェクトを作成できます:

vue create my-project

このコマンド「my-project」という名前の新しいフォルダーを作成し、その中に Vue プロジェクトを初期化します。デフォルトで生成された Vue インスタンスはプロジェクト フォルダー内にあります。

次に、次のコマンドを使用して Vue 開発サーバーを起動し、プロジェクトのリアルタイム変更と対話型テストを行うことができます。

npm run serve

上記の 3 つの方法により、Vue をインストールし、次のことを行うことができます。ブラウザで使用してください。使用したい方法を選択して、Vue の無限の可能性を探索し始めてください。

以上がvueの3つのインストール方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。