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

小云云

リリース： 2018-03-14 16:00:58

オリジナル

1452 人が閲覧しました

パッケージ化された .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

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