Vue.js環境構築入門チュートリアル

この記事では主に、vue 環境を迅速に構築するのに役立つ超簡単な Vue.js 環境構築チュートリアルを紹介します。興味のある方は、この新しいツール

を参照してください。実際に効率を向上させることができます。 vue の使い方: (前提条件はすべてネットワーク接続上にあります)

1. vue を使用してフロントエンド フレームワーク を開発するには、まず環境を用意する必要があります。この環境はノードに依存する必要があります。最初にノードをインストールし、ノードで npm を使用して必要な依存関係などをインストールします。

ここにヒント: npmを使用していくつかのツールをcmdに直接インストールすると速度が遅くなるため、タオバオのnpmイメージを使用します:
「npm install -g cnpm –registry=https :/」と入力します。 /registry.npm.taabao.org では、npm イメージをインストールできます。今後 npm を使用する場合は、代わりに cnpm を使用してください。

npm イメージをインストールした後、グローバル vue-cli スキャフォールディングのインストールを開始します。vue-cli を使用する理由は、このツールが必要なテンプレート フレームワークの構築に役立つためであり、これは比較的簡単です。方法: cnpm install -g vue-cli、Enter キーを押し、インストールが成功したかどうかを確認し、コマンド ラインに vue と入力すると、vue 情報が表示されます---インストール成功

2. スキャフォールディングをインストールしたら、作成を開始します。新しいプロジェクト: コマンド vue init webpack vue_project (最後のものは私が作成したプロジェクト フォルダーの名前です)

プロセス中に表示されます

3 cd vue_project

依存関係をインストールし、node_module ディレクトリを生成します(依存関係のコード ライブラリをインストールします)

npm install=> はこのフォルダー node_modules を生成します (注: vue-cli スキャフォールディングで構築された vue プロジェクトを他の場所にコピーするときは、node_modules ディレクトリを削除する必要があります。そうしないと、他の場所では cnpm run dev を実行できません。パスに問題があります。削除後、再度 cnpm install する必要があります)

npm run dev 準備が完了したら、プロジェクト内のデフォルトの app.vue モジュールが実行できるかどうかをテストします。最初にサーバー環境をインストールする必要があります。コマンドラインで、または「npm run dev」と入力すると、「npm run build」を実行すると、build/dev-server.js ファイルが実行されます。 execute release ) は build/build.js ファイルです。コードの読み取りと分析は、これら 2 つのファイルから開始できます。

Devdeendency は、コンパイル プロセスのいくつかの依存関係を表します。

Readme ファイル: プロジェクト説明ファイル

各コンポーネントは、テンプレート、ロジック、スタイルの 3 つの部分に分かれています

cnpm dev を実行して Enter を押すと、ブラウザが開きます

http://localhost:8080

アプリケーション シナリオ:

複雑な対話ロジックを備えたフロントエンド アプリケーションを対象としています。

基本的なアーキテクチャの抽象化を提供できます。

AJAX データの永続性を通じてフロントエンドのユーザー エクスペリエンスを確保できます。

利点:

フロントエンドがデータに対して何らかの操作を行う場合、AJAX リクエストを通じてバックエンドでデータの永続化を行うことができます。ページ全体を更新する必要はなく、データの一部のみを更新する必要があります。 DOM で変更する必要があります。変更する必要があります。特にモバイル アプリケーションのシナリオでは、ページの更新にコストがかかりすぎ、多くのリソースがリロードされますが、一部はキャッシュされますが、ページの DOM、JS、CSS はページによって再解析されるため、モバイル ページでは通常、 SPA シングルページアプリケーション。

Vue.js の特徴: MVVM フレームワーク、データ駆動型、コンポーネント化、軽量、簡潔、効率的、高速、モジュールフレンドリー。

関連記事:

純粋な Vue.js によるブートストラップ コンポーネントの構築

強力な Vue.js コンポーネントの詳細な説明

vue.js の使い方の超包括的なまとめ

以上がVue.js環境構築入門チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。