ホームページ > 記事 > ウェブフロントエンド > vue-cli は vue.js プロジェクトのメソッド インスタンスを初期化します
パッケージ化された .vue ファイルの解析
プロジェクト開発中にコンポーネントをより適切に管理できるようにするために、vue は単一ファイル コンポーネント システムを提供し、各独立したコンポーネントを .vue ファイルに配置します。このファイルは 3 つの基本的なカスタム タグを提供します。 1. テンプレート
2. スクリプト
3. コンポーネントのさまざまなコンテンツブロックを配置するためのスタイル
ただし、ブラウザはファイルタイプを直接認識できないため、コンパイルおよびパッケージ化するには、公式が提供するローダーを使用する必要があります。 vue: vue-loader
Module build failed: Error: Cannot find module 'vue-template-compiler'
または
yarn global add vue-cli
プロジェクト名: 作成するプロジェクトの名前 (このコマンドはパッケージ .json ファイルを生成します。ファイル内の名前オプションは ProjectName です。デフォルトは、現在作成されているプロジェクト ディレクトリの名前です。カスタマイズすることもできます (ただし、package.json の名前命名規則に従う必要があります。大文字、スペース、アンダースコアは使用できません)。
依存関係パッケージのインストール後実行に必要な
yarn run build: プロジェクトをビルドし、プロジェクトをパッケージ化します。パッケージ化されたプロジェクト ファイルをアップロードできますサーバーに接続します
初めて実行する場合は、ようこそページが表示され、その下でプロジェクト開発を進めることができます
main.js: 自動生成されたプロジェクト用に vue スキャフォールディングによって設定されたエントリー ファイルです
Vue の紹介
必要なコンポーネントの紹介
Vue インスタンスを作成する
アプリケーションが複雑になると、関連するページの数も増加し、Web サイトの整理と維持に複数のページを使用することになります。 、ただし、ユーザー エクスペリエンスはあまり良くありません (ページが更新またはジャンプされるため)。ユーザー エクスペリエンスの問題を解決するには、データを使用するのが最善の方法です (ページが変更されます)。ただし、ジャンプまたは更新する必要はありません。
ajaxを介して更新せずに非同期でデータを取得します
データを取得した後、vueを通してそれを処理および管理し、ページをレンダリングします
どのような状況でページをレンダリングするためのデータを取得しますか?従来の処理方法: URL を介してリクエストを再送信して、新しいデータとページを取得します。単一ページ開発モードを使用する場合は、ページ ジャンプは使用できなくなりますが、取得するページ データは URL によって決まります。 URL のハッシュ値は、取得するコンテンツとレンダリングするページを決定するために変更されます。
URL のハッシュはビューに対応するので、ハッシュとビューの間の関係を設定する必要があります。ハッシュとビューの間に対応関係 (マッピング) を作成できます
- ハッシュのマップ (マッピング) 関係を設定します-ビュー
- ハッシュ変更のモニタリング
- ハッシュ値が変化すると、マップに従って対応するコンポーネントが見つかり、ビューをレンダリングします
vue は、上記の機能を実装するためのサードパーティ フレームワークを提供します: vue-router
上で説明したアドレス - ビューのマッピング: ルーティング
関連する推奨事項:
vue-cli を使用してマルチページ アプリケーションを開発する簡単な例
以上がvue-cli は vue.js プロジェクトのメソッド インスタンスを初期化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。