vue-cli は vue.js プロジェクトのメソッド インスタンスを初期化します

パッケージ化された .vue ファイルの解析

プロジェクト開発中にコンポーネントをより適切に管理できるようにするために、vue は単一ファイル コンポーネント システムを提供し、各独立したコンポーネントを .vue ファイルに配置します。このファイルは 3 つの基本的なカスタム タグを提供します。 1. テンプレート
2. スクリプト
3. コンポーネントのさまざまなコンテンツブロックを配置するためのスタイル
ただし、ブラウザはファイルタイプを直接認識できないため、コンパイルおよびパッケージ化するには、公式が提供するローダーを使用する必要があります。 vue: vue-loader

ERROR in ./src/Hello.vue

Module build failed: Error: Cannot find module 'vue-template-compiler'

vue の実際の開発は、.vue 単一コンポーネント システムを使用して実装されます, しかし、実際の複雑なニーズを満たすことはできません。.vue と統合するには多くのことを設定する必要があります。この設定は非常に面倒なので、公式は、.vue で使用する必要があるコンテンツを構築するのに役立つツールを提供しています。プロジェクトの開発プロセス、このツール: vue-cli、このツールを使用すると、vue に基づいたプロジェクトを簡単に作成できます。このツールを Scaffolding

インストールします

npm install vue-cli -g (global)

または
yarn global add vue-cli

上記の方法で vue スキャフォールディングをインストールした後、コマンド ラインで次のコマンドを使用できます: vue (コマンドには -cli がありません)

vue の使用法

vue init

init: vue ベースのプロジェクトを初期化 (作成) します

vue init webpack hello: webpack に基づいて hello という名前の vue プロジェクトを構築します (プロジェクト構築は Network! Network! である必要があります)

vue-cli は対話型のコマンドラインですvue コマンドを使用してプロジェクトをビルドするには、いくつかのプロジェクト情報を入力する必要があります:

プロジェクト名: 作成するプロジェクトの名前 (このコマンドはパッケージ .json ファイルを生成します。ファイル内の名前オプションは ProjectName です。デフォルトは、現在作成されているプロジェクト ディレクトリの名前です。カスタマイズすることもできます (ただし、package.json の名前命名規則に従う必要があります。大文字、スペース、アンダースコアは使用できません)。

プロジェクトの説明: プロジェクトの紹介、package.json ファイルにも表示されます (オプション)

作成者: 作成者、オプション

次のステップで直接入力します

vue-router のインストール: vue ルーティング コンポーネントをインストールするかどうか、実行しますプロジェクトをインストールする必要があります

ESLint を使用してコードをリントします: コード検出に ESLint モジュールを使用する必要がありますか

Karma + Mocha で単体テストをセットアップしますか?: テスト (単体テスト) をインストールしますか?: はい インストールエンドツーエンドのテスト

上記の手順を完了してください。

vue-cli による構成が完了したら、次のステップは、vue に必要な依存関係パッケージをインストールすることです。プロジェクトがインストールする必要がある依存関係パッケージは、vue-cli ツールによって自動的に生成される package.json ファイルに記述されています。

依存関係: プロジェクト内の実際の依存関係 使用する必要がある依存関係パッケージ

devDependency: プロジェクト開発プロセス中に使用する必要がある一部のツール パッケージは、プロジェクトの実際のオンライン コードの一部ではありません

依存関係パッケージのインストール後実行に必要な

がインストールされている場合、プロジェクトを開始して

を実行できます

yarn run dev / npm run dev: テスト開発環境を開きます

yarn run build: プロジェクトをビルドし、プロジェクトをパッケージ化します。パッケージ化されたプロジェクト ファイルをアップロードできますサーバーに接続します

初めて実行する場合は、ようこそページが表示され、その下でプロジェクト開発を進めることができます

プロジェクト構造

ビルドディレクトリ: プロジェクトコマンドをビルドするために必要ないくつかのスクリプトファイルと設定ファイル

• config ディレクトリ: vue-cli に自動的にインストールされます。 Express によって構築された小さなホット リロード Web サーバー。 config には、このサーバーの関連構成が含まれます。

• ディレクトリ: プロジェクトがコンパイルおよび構築された後のストレージ ディレクトリ。オンライン

• node_modules ディレクトリ: プロジェクトの依存関係パッケージの保存ディレクトリ

• src ディレクトリ: プロジェクトのソース コードの保存ディレクトリ

• static ディレクトリ: 静的リソースの保存ディレクトリ

• プロジェクトの開発プロセス中、ほとんどのタスクは src ディレクトリで完了します

• main.js: 自動生成されたプロジェクト用に vue スキャフォールディングによって設定されたエントリー ファイルです

• Vue の紹介

• 必要なコンポーネントの紹介

• Vue インスタンスを作成する

ルーティング

アプリケーションが複雑になると、関連するページの数も増加し、Web サイトの整理と維持に複数のページを使用することになります。 、ただし、ユーザー エクスペリエンスはあまり良くありません (ページが更新またはジャンプされるため)。ユーザー エクスペリエンスの問題を解決するには、データを使用するのが最善の方法です (ページが変更されます)。ただし、ジャンプまたは更新する必要はありません。

• ajaxを介して更新せずに非同期でデータを取得します

• データを取得した後、vueを通してそれを処理および管理し、ページをレンダリングします

どのような状況でページをレンダリングするためのデータを取得しますか?従来の処理方法: URL を介してリクエストを再送信して、新しいデータとページを取得します。単一ページ開発モードを使用する場合は、ページ ジャンプは使用できなくなりますが、取得するページ データは URL によって決まります。 URL のハッシュ値は、取得するコンテンツとレンダリングするページを決定するために変更されます。

URL のハッシュはビューに対応するので、ハッシュとビューの間の関係を設定する必要があります。ハッシュとビューの間に対応関係 (マッピング) を作成できます
- ハッシュのマップ (マッピング) 関係を設定します-ビュー
- ハッシュ変更のモニタリング
- ハッシュ値が変化すると、マップに従って対応するコンポーネントが見つかり、ビューをレンダリングします

vue は、上記の機能を実装するためのサードパーティ フレームワークを提供します: vue-router

上で説明したアドレス - ビューのマッピング: ルーティング

関連する推奨事項:

vue-cli を使用してマルチページ アプリケーションを開発する簡単な例

vue-cli が vue プラグイン インスタンスを作成する

vue-cli でルーティングを使用する方法

以上がvue-cli は vue.js プロジェクトのメソッド インスタンスを初期化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。