【VueによるSPA構築】Vue CLIで作った開発環境の構造

課題を持った人

「vue create」コマンドでシングルページアプリケーションの雛形を構築したら、たくさんのディレクトリやファイルができました。ディレクトリ構成やファイルの役割について知りたいな。

こういった要望に答えます。

筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。

この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。

Vueアプリケーションの雛形の構成や役割【概要】

環境によって若干の違いがあるかもしれませんが、Vueプロジェクトの雛形は以下のような構成になっていると思います。

その中で使うことが多い「public」「src」ディレクトリについて解説していきます。

「public」ディレクトリについて

「vue create」コマンドで作った雛形のファイルやディレクトリは役割が決まっています。

「public」ディレクトリには、webpackによって処理されないアセットを格納します。

publicディレクトリ内のリソースはwebpackによる処理はされず、distディレクトリにコピー、配置されます。例えば、publicディレクトリに「/public/img/img01.png」というリソースがあった場合、それは、そのままの状態でdistディレクトリにコピー、配置(/dist/img/img01.png)されます。

index.htmlファイルはシングルページアプリケーションの起点になるファイルです。このファイルを元に、バンドリングされるJSファイルのURLがscript要素のsrc属性に自動的に挿入されます。さらに、このファイルとバンドリングされたJSファイルやアセットがdistディレクトリ(ビルド時に作成される)に配置されます。

「views」ディレクトリについて

「src」ディレクトリには、主にwebpackに処理されるアセットを格納します。srcディレクトリの中にはさらにassetsディレクトリ、componentsディレクトリ、viewsディレクトリ、App.vueファイル、main.jsファイル、router.jsファイルが入っています。それぞれのディレクトリ、ファイルについて見ていきましょう。

assetsディレクトリ

webpackによる処理を加えるファイルはこのディレクトリに格納します。

componentsディレクトリ

.vueファイル(単一ファイルコンポーネント)を格納します。アプリケーション内で何度も使うようなパーツはコンポーネント化しておくと便利です。

viewsディレクトリ

ページデータを格納します。拡張子は「.vue」です。

App.vueファイル

viewsディレクトリに格納したページはApp.vueを通して表示します。アプリケーション全体で使うナビゲーションはここで設定します。

main.jsファイル

Vueの基本設定ファイルです。App.vueをhtmlに紐付けます。

router.jsファイル

VueリソースのURLやURLに紐づくコンポーネント等を設定します。通常のWebアプリケーションと違い、シングルページアプリケーションにページ内リンクを設置する場合はrouter.jsを編集する必要があります。

筆者

以上がVue CLIで作った雛形の構成や役割についての説明です。すこしでもお役に立てたら幸いです。正直、この記事はかなり迷いながら書きました(＾-＾；)先日、会社でVue CLIを使って開発していた時は分かっていたつもりだったのですが、分かったつもりになっていただけだったようです。誰かにスラスラと説明できるようでなければダメですね。もっと勉強しなくてはと思いました。反省。