Vueプロジェクトの構築と実践例チュートリアル

Vue は比較的穏やかな学習プロセスと斬新な技術的アイデアにより、大多数のフロントエンドおよびバックエンド開発者に好まれています。同時に、そのわかりやすい API およびデータ バインディング機能も多くの人々を魅了しています。注目のユーザー。この記事は主に Vue プロジェクトの構築と実際の実装について説明するため、Vue の初心者レベルのユーザーが Vue プロジェクトを最初から構築する手順と方法を理解できるようにするために、その API と構文についてはあまり説明しません。

まず、vue プロジェクトを構築する前に、vue プロジェクトの分類を理解する必要があります。ここでは主に、(1) vue.js ファイルを直接導入する (2) vue 単一ファイル コンポーネントを使用する

の 2 つのカテゴリに分けます。上記の 2 つを押してください。 クラスの観点から見ると、vue.js ファイルを直接導入することは、ページに jQuery を直接導入することと同じであり、いくつかの基本的な API と限られた機能しか使用できません。小さなプロジェクト。この記事では主に、Vue を使用してファイル コンポーネントを使用して構築された 2 番目のタイプの Vue プロジェクトについて説明します。

vue プロジェクトを構築するにはさまざまな方法があります。まず、対応する構築ツールを使用する必要があります。公式に推奨されているビルドツールは主にwebpackとbrowserifyです。ここではwebpackを使ってビルドすることをお勧めします。同時に、ビルドツールに加えて、ビルドメソッドも使用する必要があります。たとえば、vue-cli スキャフォールディングを使用して、vue プロジェクトのベースディレクトリファイルを自動的に生成することもできます。もちろん、ビルドをカスタマイズすることもできます。ゼロから。

vue-cli build

vue-cli スキャフォールディングを使用して vue プロジェクトをビルドする場合、次の 5 行のコマンドを入力するだけで簡単な vue プロジェクトを生成できます (前提条件は、node.js をインストールすることです):

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

この種のビルド方法は、すべてのプロジェクトに適しているわけではありません。また、自動生成されたファイルについて何も知らない場合、後でそれらを保守するのは非常に困難になります。したがって、初心者が vue-cli を使用してビルドすることはお勧めできません。代わりに、vue-cli によって生成されたファイルを参照して vue プロジェクトを最初からビルドすることをお勧めします。

カスタム ビルド

vue-cli ビルドと比較して、カスタム ビルドははるかに柔軟ですが、構築の手順と原則を理解する必要があり、それに応じて要件も増加します。カスタムビルドは次の手順に分かれています:

ファイル/フォルダーの作成

package.jsonファイルの作成

webpack設定ファイルの作成

entryファイルの作成

vueコンポーネントの作成

ルーティング設定

package.jsonファイル

次のコマンドを使用すると、package.json ファイルを簡単に作成できます:

npm init -y

その後、そのスクリプト構成項目を変更し、パッケージ化コマンドと圧縮コマンドを追加し、依存関係を追加して、対応するプロジェクトの依存関係を追加します。

webpack 設定ファイル

次に、webpack 設定ファイルを作成する必要があります。他のプロジェクトのビルドとの違いは、vue 単一ファイル コンポーネントを vue-loader ローダーを使用してロードする必要があり、変換には babel-loader を使用することです。 ES6 の構文

エントリ ファイル

ここでは、webpack で構成されたエントリ ファイル アドレスのentry.js を記述する必要があります。主な機能は、生成された vue インスタンス アプリをアプリの ID で DOM ノードにマウントすることです

次に、最も単純な vue コンポーネントを記述する必要があります。この記事では、vue プロジェクトを構築する 2 つの方法を主に紹介します。vue-cli 構築とカスタム構築には、それぞれ適用可能なスコープとオブジェクトがあります。プロジェクトと独自の条件に焦点を当てる必要があります。カスタム ビルドには、この記事で説明されていない多くの機能構成が含まれているので、最適なものを選択してください。興味のある子供用の靴は、自分で調べ続けることができます。

以上がVueプロジェクトの構築と実践例チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。