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

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

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

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

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

1. 独立したバージョン

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

2. CDN 方式を使用します

: https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内の不安定さ)
: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 キーを押して入力してください。しばらくすると、プロジェクトに次の情報が含まれていることが表示されます。以下に示すように、正常に作成されました。