vue をパッケージ化すると何が生成されますか?

Vue は、シングルページ アプリケーションの開発用に設計されたオープン ソースの JavaScript フレームワークです。 Vue が開発を続けるにつれて、開発者は Vue をパッケージ化して運用環境にデプロイする方法に焦点を当て始めます。この記事では、Vue をパッケージ化した後に生成されるいくつかのファイルとフォルダーを紹介します。

Vue アプリケーションをパッケージ化するためのツール

生成されたファイルを導入する前に、まず Vue アプリケーションをパッケージ化するためのツールである Webpack を導入する必要があります。 Webpack は、必要なすべてのファイルを静的リソースに変換し、それらを 1 つ以上のパッケージにバンドルする静的モジュール パッケージング ツールです。 Vue プロジェクトでは、パッケージ化に Webpack をよく使用します。

パッケージ化されたファイルとフォルダー

Vue アプリケーションをパッケージ化すると、「dist」というフォルダーが表示されます。このフォルダーには、パッケージ化されたアプリケーション全体のコードとリソースが含まれており、これはサーバーにデプロイされるコード ベースです。 「dist」フォルダー内のいくつかの重要なファイルとフォルダーを見てみましょう。

index.html

index.html は、アプリケーションのエントリ ファイルです。このファイルは、Webpack パッケージ化によって生成される唯一の HTML ファイルです。これには、Vue アプリケーションのすべての JavaScript および CSS コード、およびこれらのファイルをロードするために使用されるスクリプトとタグが含まれています。

JS ファイル

JS ファイルはすべて、Vue アプリケーションの JavaScript コードです。 Vue プロジェクトには、app.js と Vendor.js という 2 つの主要な JavaScript ファイルがあります。 app.js には、Vue コンポーネントとアプリケーションのすべてのロジック コードが含まれています。 vendor.js にはサードパーティのライブラリと依存関係が含まれています。

CSS ファイル

CSS ファイルは、Vue アプリケーションのスタイル シートです。通常、Vue プロジェクトには、app.css と Vendor.css という 2 つの主要な CSS ファイルがあります。 app.css にはアプリケーションのすべてのスタイルが含まれており、vendor.css にはサードパーティのライブラリと依存関係のスタイルが含まれています。

静的フォルダー

静的フォルダーには、画像やフォント ファイルなど、アプリケーションの静的リソースが含まれます。これらのファイルは Web アプリケーションで頻繁に使用されます。

概要

Vue アプリケーションでは、Webpack はコードをパッケージ化してビルドするために使用されるツールです。必要なすべてのファイルを静的リソースに変換し、それらを 1 つ以上のパッケージにバンドルします。パッケージ化が完了すると、Vue アプリケーション コードを含む HTML、JavaScript、CSS ファイルが「dist」フォルダーに生成されます。すべての静的リソースは静的フォルダー内で見つけることもできます。これを理解すると、アプリケーション開発に Vue を使用するときにコードをより深く理解し、デプロイできるようになります。

以上がvue をパッケージ化すると何が生成されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。