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

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 そして、インストールが完了するまで待ちます。

#インストールが成功したかどうか: vue -V
webpack バージョンのクエリ: webpack -v
上記の 3 つの手順を経て、準備する必要のある環境とツールが準備できたので、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## を実行します。

#小規模および中規模のプロジェクト向けにプロジェクトを作成する別の方法 (推奨)

vue init webpack- simple vuedemo02

cd vuedemo02

cnpm install / npm install

npm run dev

他人のプロジェクトを取得して正常に実行できない場合は、プロジェクトの依存関係をインストールするためのプロジェクトへの CD がない場合は、node_modules ファイル (プロジェクトのすべての依存関係) です:

cnpm install/npm install

関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年最新の 5 つの vue.js ビデオ チュートリアルのセレクション

プログラミング関連の知識について詳しくは、

プログラミング教育をご覧ください。 ！

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