vue.js の 3 つのインストール方法を簡単に説明します

この記事では、vue.js の 3 つのインストール方法を紹介します。Vue.js の目標は、可能な限り単純な API を通じて応答性の高いデータ バインディングと結合されたビュー コンポーネントを実装することです。始めるのが簡単なだけでなく、サードパーティのライブラリや既存のプロジェクトと簡単に統合することもできます。

Vue.js (/vjuː/ と発音、ビューに似ています) は、データ駆動型の Web インターフェイスを構築するための進歩的なフレームワークです。 Vue.js の目標は、可能な限りシンプルな API を使用して、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。簡単に始められるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。

#Vue.js をインストールする 3 つの方法は次のとおりです:

1. 独立したバージョン

Vue.js の公式 Web サイトから vue.js を直接ダウンロードし、<script> タグで引用できます。 -> <script src = ../vue.js> </script> 開発環境では最小限に圧縮されたバージョンを使用しないでください。そうしないと、エラー プロンプトや警告が表示されなくなります。

2. CDN 方式を使用します

BootCDN (国内)
• : https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内の不安定さ)
unpkg
• :https://unpkg.com/vue/dist/vue.js は、npm によってリリースされた最新バージョンとの一貫性を保ちます。 (推奨)
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/ vue .min.js ()## など

# 3.NPM 方式

大規模なアプリケーションを構築する場合は、NPM インストール方式を使用することをお勧めしますVue.js では、NPM は

Webpack や Browserify などのモジュール パッケージャーとうまく併用できます。 Vue.js は、単一ファイル コンポーネント を開発するためのサポート ツールも提供します。 # まず、次に必要なものを列挙しましょう:

node.js 環境 (npm パッケージ マネージャー)

vue- cli 足場構築ツール

• cnpm npm タオバオ画像
• 1) ノードをインストールします。js

から ノードをダウンロードしてインストールします。 「node.js 公式ウェブサイト。インストールプロセスは非常に簡単です。「次へ」をクリックするだけで問題ありません。インストール後、コマンドラインツール (win R) を開き、「

」と入力します。ノードのバージョンを確認するには、node -v コマンドを使用します。対応するバージョン番号が表示されれば、インストールは成功しています。

npmパッケージマネージャーはnodeに統合されているので、nodeをインストールするとnpmがインストールされますので、npm -vコマンドを直接入力して表示します。 npmのバージョン情報。

これまでのところ、ノード環境はインストールされており、npm パッケージ マネージャーも利用可能です。一部の npm リソースがブロックされているか、外部リソースであるため、依存パッケージのインストール時に npm が失敗することがよくあります。そのため、npm のドメスティック イメージ ----cnpm.

# も必要です。 2) cnpm

をインストールします。

コマンド ラインに npm install -g cnpm --registry=https://registry.npm.taabao.org と入力して待ちます。エラーが報告されない場合は、インストールが完了していることを意味します。次の図に示すように、成功しました (すでにインストールしています。成功した更新情報が表示されます)。

# これは完了し、NPM の代わりに CNPM を使用できるようになります。依存パッケージをインストールします。 cnpm についてさらに詳しく知りたい場合は、タオバオ npm ミラー公式ウェブサイト をご覧ください。

3) vue-cli スキャフォールディング構築ツールをインストールします

コマンド ラインでコマンドを実行します npm install -g vue-cli ,その後、インストールが完了するまで待ちます。

上記の 3 つのステップを経て、準備する必要のある環境とツールが準備できました。次に、vue-cli を使用してプロジェクトをビルドしていきます。

まず、プロジェクトを保存する場所を選択する必要があります。次に、コマンド ラインを使用して、選択したディレクトリにディレクトリを移動します。ここでは、 c ドライブ (NodeTest ディレクトリ) で、以下に示すように cd を使用してディレクトリをこのディレクトリに変更します。 NodeTest ディレクトリ 次に、コマンド

vue init webpack firstApp

をコマンド ラインで実行します。このコマンドの説明: このコマンドは、webpack がビルド ツールであるプロジェクトを初期化することを意味します。つまり、プロジェクト全体が webpack に基づいています。 firstApp はプロジェクト フォルダー全体の名前です。このフォルダーは指定したディレクトリに自動的に生成されます (この例では、フォルダーは NodeTest ディレクトリ

に生成されます)。以下に示すように。

これにより、ユーザーはいくつかの基本的な項目を入力できるようになります。初期化コマンドを実行するときの構成オプション。たとえば、プロジェクト名、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、プロジェクトの説明、作成者情報については、理解できない場合や入力したくない場合は、Enter キーを押して入力してください。しばらくすると、プロジェクトに次の情報が含まれていることが表示されます。以下に示すように、正常に作成されました。

次に、NoteTest ディレクトリに移動して、ファイルが作成されたかどうかを確認します。作成:

# firstApp プロジェクトを開きます。プロジェクト内のディレクトリは次のとおりです:

ディレクトリとその機能を紹介します。

ビルド: 最終的にリリースされたコードの保存場所。

config: パス、ポート番号、その他の情報を設定します。最初に学習を開始したときは、デフォルトの構成を選択しました。

node_modules: npm によってロードされるプロジェクト依存モジュール。

src: これは開発のメイン ディレクトリです。基本的に行う必要があることはすべてこのディレクトリ内にあり、このディレクトリにはいくつかのディレクトリとファイルが含まれています:

アセット: ロゴやその他の画像などを配置します。

# コンポーネント: コンポーネント ファイルをディレクトリに配置すると、それは使用できません。

App.vue: プロジェクト エントリ ファイル。

components ディレクトリを使用する代わりに、ここにコンポーネントを記述することもできます。

main.js: プロジェクトのコア ファイル

## static: 画像、フォントなどの静的リソース ディレクトリ。

test: 初期テスト ディレクトリ、削除可能

.XXXX ファイル: 設定ファイル 。

index.html: ホームページのエントリ ファイル。メタ情報や統計コードなどを追加できます。

package.json: プロジェクト構成ファイル。

README.md: プロジェクト説明ファイル。

プロジェクト全体のディレクトリ構成ですが、このうち主に src ディレクトリを変更します。このプロジェクトはまだ単なる構造フレームワークであり、プロジェクト全体に必要なすべての依存リソースがまだインストールされていません。

プロジェクトのインストールに必要な依存関係: cnpm install を実行します (ここでは npm の代わりに cnpm を使用できます)

## インストールが完了したら、独自のプロジェクトを見ると、追加の node_modules フォルダーがあり、これには必要な依存関係パッケージのリソースが含まれています。

依存パッケージのリソースをインストールした後、プロジェクト全体を実行できます。

プロジェクトを実行します

##プロジェクト ディレクトリで、コマンド

npm run dev を実行すると、ホット ロードを使用してアプリケーションが実行されます。ホット ロードを使用すると、コードを手動で更新せずに変更できます。ブラウザでは変更された効果をリアルタイムで確認できます。

プロジェクトが開始された後、ブラウザ プロジェクトの開始後にアドレスを入力します:

vue ロゴがブラウザに表示されます:

詳細 プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

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