vue.js のインストール方法はいくつかあります-Vue.js-php.cn

vue.js には 3 つの一般的なインストール方法があります: 1. Vue.js 公式 Web サイトから vue.js ファイルを直接ダウンロードし、script タグを使用して HTML でそれを参照します; 2. CDN を使用します。 HTML 内のメソッド参照用にスクリプトタグ内の CDN リンクを直接使用します; 3. NPM ツールを使用してインストールします。

このチュートリアルの動作環境: Windows7 システム、vue2.9 バージョン。この方法はすべてのブランドのコンピューターに適しています。

関連する推奨事項: 「vue.js チュートリアル」

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

以下では、Vue.js の 3 つのインストール方法を紹介します。

独立バージョン

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

vue マルチページ開発を使用する:

vue.js を導入する
vue ルートインスタンスを作成する new Vue({option})

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 (<script src="https%20://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

NPM 方式 (推奨) )

Vue.js で大規模なアプリケーションを構築する場合は、NPM インストール方法を使用することをお勧めします。NPM は、Webpack や などのモジュールと適切にパッケージ化できます。 Browserify はデバイスと組み合わせて使用されます。 Vue.js は、単一ファイルコンポーネントを開発するためのサポートツールも提供します。

まず、次に必要なものを列挙しましょう:

node.js 環境 (npm パッケージマネージャー)
vue- cli 足場構築ツール
cnpm npm の Taobao ミラー

##node.js のインストール

ダウンロードしてインストールしますNode.js 公式 Web サイトからのノードです。インストールプロセスは非常に簡単です。「次へ」をクリックするだけで問題ありません。インストール後、コマンドラインツール (win R) を開き、node -v コマンドを入力してノードを表示します。対応するバージョン番号が表示された場合は、インストールが成功したことを意味します。

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

これまでに、ノード環境がインストールされ、npm パッケージマネージャーも利用できるようになりました。一部の npm リソースがブロックされている、または外部リソースがあるため、npm はしばしば次のインストールを引き起こします。依存パッケージが失敗したため、npm----cnpm の国内イメージも必要です。

cnpm のインストール

コマンドライン install に

npm と入力します。 g cnpm --registry=http://registry.npm.taabao.org をクリックして待ちます。エラーが報告されなければ、インストールは成功しています (私のものはすでにインストールされており、更新成功メッセージが表示されます)。

完了後、npm の代わりに cnpm を使用して依存パッケージをインストールできます。 cnpm について詳しく知りたい場合は、淘宝網 npm ミラー公式ウェブサイトをご覧ください。

vue-cli スキャフォールディング構築ツールをインストールします (グローバルにインストールする必要があります)

コマンドラインでコマンドを実行します

npm install -g vue-cli そして、インストールが完了するまで待ちます。

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

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

このプロジェクトが保存されているフォルダーをエディターで手動で作成した場合は、プロジェクトに cd します: vue init webpack ; 初期化するだけで、webpack が依存するパッケージもロードします:

このディレクトリに作成されるかどうか

コマンドを入力すると、必要に応じて記入できる簡単なオプションがいくつかあります。

プロジェクト名: プロジェクト名。変更する必要がない場合は、Enter キーを押してください。注: ここでは大文字は使用できないため、名前を vueclitest
に変更しました。プロジェクトの説明: プロジェクトの説明。デフォルトは Vue.js プロジェクトです。Enter キーを押すだけで、書く必要はありません。
Author: 著者、git author を設定している場合は、著者がそれを読みます。
vue-router をインストールしますか? vue ルーティングプラグインをインストールするかどうか、ここでインストールする必要があるため、Y を選択してください
Use ESLint to lint your code? ESLint を使用してコードを制限するかどうかコードのエラーとスタイル。ここでは n を入力する必要はありません (推奨)。大規模なチームで開発している場合は、これを設定することをお勧めします。
Karma Mocha を使用して単体テストをセットアップしますか? 単体テストツール Karma Mocha をインストールする必要がありますか? ここでは必要ないので、「n」と入力します。
Nightwatch で e2e テストをセットアップしますか? ユーザー動作シミュレーションテストのために e2e をインストールしますか? ここでは必要ないため、n

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

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

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

ディレクトリを紹介し、その機能:

build: 最終的にリリースされたコードの保存場所。
config: パス、ポート番号、その他の情報を設定します。最初に学習を開始したときは、デフォルトの設定を選択しました。
node_modules: npm によってロードされるプロジェクトに必要なさまざまな依存モジュール。
src: これは開発のメインディレクトリ (ソースコード) です。基本的に行う必要があることはすべてこのディレクトリ内にあり、このディレクトリにはいくつかのディレクトリとファイルが含まれています:
- assets: 画像を配置します
- components: 各コンポーネントファイルはディレクトリに配置されます
- router/index.js: ルーティングを設定する場所
- App.vue: プロジェクトエントリコンポーネント (コンポーネント付き) の場合は、コンポーネントディレクトリを使用する代わりに、ここにコンポーネントを記述することもできます。主な機能は、独自に定義したコンポーネントをレンダリングのためにページに接続することであり、これは不可欠です。
- main.js: プロジェクトのコアファイル (プロジェクト全体のエントリ js) には、依存関係パッケージ、デフォルトのページスタイルなどが導入されます (app.js ファイルは、プロジェクトが実行されます)。
- static: 画像、フォントなどの静的リソースディレクトリ。
- test: 初期テストディレクトリ。
.XXXX ファイル: 構成ファイルを削除できます。
index.html: 単一の HTML ページの入り口ページ。メタ情報、統計コード、ページリセットスタイルなどを追加できます。
package.json: プロジェクト構成情報ファイル/依存開発パッケージのバージョン情報、依存プラグイン情報。
README.md: プロジェクト説明ファイル。
webpack.config.js: webpack の構成ファイル。.vue ファイルをブラウザーが理解できるファイルにパッケージ化します。
.babelrc: es6 構文を検出するためのファイルの構成です
.getignore: ファイルの構成を無視します (取得時に無視されないようにローカルデータモックをシミュレートするなど)オンラインで送信/パッケージ化) ここで構成できます)
.postcssrc.js: プレフィックス構成
.eslintrc.js: eslint 文法ルールを構成します (ルール属性でどの文法ルールが無効かを構成します)
.eslintignore: プロジェクト内の特定のファイルの eslint による構文ルールのチェックを無視します。

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

cd プロジェクト名; プロジェクトを入力

プロジェクトに必要な依存関係パッケージ/プラグインをインストールします (package.json で表示可能): cnpm install (npm) を実行します。警告があります。ここでは npm の代わりに cnpm を使用できます。他の人のコードを実行するには、最初に依存関係をインストールする必要があります)プロジェクトの作成時にエラーが報告されない場合は、この手順を省略できます。エラーが報告された場合は、プロジェクトに cd して実行します。 cnpm install / npm install

他の人のプロジェクトまたは gethub からダウンロードしたプロジェクトを入手した場合、最初のステッププロジェクト内でcnpm install;プロジェクトが依存するプラグインをダウンロードし、npm run dev プロジェクトを実行します

インストールが完了しました。その後、独自のプロジェクトに移動すると、必要な依存関係パッケージのリソースが含まれる追加の node_modules フォルダーがあることがわかります。

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

プロジェクトの実行

プロジェクトディレクトリで、コマンド npm run dev (npm run start) を実行します。これにより、ホットロードを使用してアプリケーションが実行されます。コードを変更した後にブラウザを手動で更新せずに、変更された効果をリアルタイムで確認してみましょう。

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

vue のロゴが表示されます:

この時点で、vue の 3 つのインストール方法が紹介されました。

プロジェクトが完了したら、パッケージ化コマンド「cnpm run build」を入力します。dist ファイルが生成されます。これがパッケージ化ファイルです。.html ファイルをクリックして実行すると、成功します。。

Build vue 開発環境 (概要)

Node.js がインストールされている必要があります
Build vue 開発環境、vue のスキャフォールディングツールをインストールします。公式コマンドラインツール
npm install - -global vue-cli
プロジェクトを作成するには、対応するプロジェクトに cd する必要があります。

vue init webpack vue-demo01

cd vue-demo01
cnpm install / npm install プロジェクトの作成時にエラーが報告されない場合、この手順は省略できます。エラーが報告された場合は、プロジェクトに移動して cnpm install / npm install
npm run dev/npm run start## を実行します。