Vue でのコンポーネントベースのプロジェクト開発 (詳細なチュートリアル)

この記事は主に Vue プロジェクトのコンポーネント エンジニアリング開発実践計画を紹介します。非常に優れており、必要な友人は参考にしてください。

抽出したスキャフォールディングに vde-cli という名前を付け、vde-cli ディレクトリ構造を渡します。スキャフォールディングによって生成されるコンポーネント ライブラリ プロジェクトの内容は次のとおりです。

Core Functions

Component Library

プロジェクトのパッケージ フォルダーは、コンポーネント ライブラリにさまざまなコンポーネントを格納するために使用されます。コンポーネントを作成するコマンドを直接使用して、ファイルを作成してコンポーネントを手動で作成する必要があります。各コンポーネントには個別のコンポーネント フォルダーがあります。コンポーネント フォルダーには、「index.vue」、「example.vue」、および「readme.md」という少なくとも 3 つのファイルが含まれています。これらのファイルは、コンポーネントの作成によって作成されます。指定されたテンプレートを追加してコンポーネントを作成するコマンドは次のとおりです:

npm run generated

2 つのパラメーターは、コンポーネントの名前と、後でドキュメントに表示されるために使用される名前です。およびサンプルプロジェクト名。

コンポーネント ライブラリの外部メイン ファイルはプロジェクトの src/index.js です。コンポーネントが上記のコマンドで作成されている限り、このファイルは自動的に更新されます (手動で更新する時間を節約します)

Doc Document Project

ドキュメント ドキュメント プロジェクトは、コンポーネントのドキュメントを表示するために使用される小さな単一ページ システムです。コンポーネント ドキュメントは、各コンポーネント フォルダーに保存されている readme.md ファイルです。vue-markdown-loader を使用してこのファイルを解析し、ページ上にも表示される vue コンポーネントに変換します。上記のコマンドでコンポーネントを作成すると、Doc ドキュメント プロジェクトのすべての依存コンポーネント部分が自動的に更新されます (手動操作は必要ありません)

サンプル プロジェクト

サンプル サンプル プロジェクトは、Doc ドキュメント プロジェクトに似ており、使用されますコンポーネントを表示する 小規模な単一ページ システムの例の場合、コンポーネントの例は、各コンポーネント フォルダーに保存されている example.vue ファイルです。手順に従ってコンポーネントを作成した後、このファイルに記述したコンポーネントをテストできます。

上記のドキュメント プロジェクトとサンプル プロジェクトには、それぞれ webpack-dev-sever を介して対応するサービスがあります。コンポーネントを追加し、コンポーネント ファイルの下のファイル情報を変更すると、これら 2 つのアプリケーションが自動的に更新されます。

大規模プロジェクト全体のフローチャートを次のように表すために 1 つの図を使用します:

主な実装方法

大規模プロジェクト全体が実際にはコンポーネント ライブラリ、ドキュメントで構成されていることは上で紹介しました。プロジェクトとサンプルプロジェクト、もちろん、核となるのはコンポーネントなので、すべてはコンポーネントの作成から始める必要があります:

すべてのコンポーネントは大きなプロジェクトのパッケージに保存されます。つまり、パッケージはすべてのコンポーネントが格納されるルートディレクトリです。 (コンポーネント構成情報関連と同様) が保存されます。 まず注意すべきことは、各コンポーネント フォルダーには、コンポーネント メイン ファイル (index.vue)、コンポーネント サンプル ファイル (example.vue)、およびコンポーネント ドキュメント ファイル (readme.md) の少なくとも 3 つのファイルが含まれていることです。各コンポーネントに含まれる 3 つのファイルは、対応するテンプレート ファイルを通じて生成されます。これらの 3 つのテンプレート形式は、次のように、独自のニーズに応じてカスタマイズできます。

コマンドを使用してコンポーネントを作成します。 1 つはコンポーネントの名前 (コンポーネントが作成されるフォルダーの名前) を表し、もう 1 つはコンポーネントのタイトル (ドキュメント プロジェクトやサンプル プロジェクトのナビゲーション名表示に使用されます) を表します。これら 2 つのパラメーターを使用すると、コンポーネントのテンプレート ファイルを結合して対応するコンポーネントを生成し、これらのコンポーネント情報を gen/route.json に書き込むことができます。これは、ドキュメント プロジェクトとサンプル プロジェクトの両方がこの情報に大きく依存しているためです。 コンポーネントの作成後、非常に重要な作業は、新しいコンポーネント情報 (docs/main.js) をドキュメント プロジェクトに自動的に登録し、コンポーネント ライブラリの外部メイン ファイル (src/index.js) を更新することです。テンプレートを通じて生成される場合もあり、テンプレートの形式は次のとおりです。

の使用には、次の 4 つのコマンドのみが必要です:

1. vde-cli をインストールします。モジュールをグローバルに

npm install -g vde-cli

2. プロジェクトを初期化します

$ vde init <project-name>

3. 必要なモジュールをインストールします

$ npm install

4.

$ npm run start

然后整个工程就能运行起来了，应用的时候可以根据实际需求修改组件相关的模板和加入自己的组件库的其它配置信息就可以了。文档工程和例子工程的路由等信息都会在通过创建组件命令的时候自动更新，你在更改组件的文档和组件功能的时候，文档工程和例子工程都会实时更新。

实际项目接入

这里推荐使用npm link的方式，在项目里npm link本地用vde init的那个工程即可。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中使用eventBus如何实现同级组件的通讯

在node.js中如何实现下载图片

使用vue2.0+vue-dplayer这些技术如何实现hls播放的示例

以上がVue でのコンポーネントベースのプロジェクト開発 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。