本パートでは前回のパートで作成した Vue.js アプリケーションの初期構成の説明を行います。特に作業はありませんのでさっと目を通して今後必要になったら、改めて見直していただいても結構です。

まずは前回も記述しましたが現時点のファイル構成を下記に記述します。

Copied!
PITMARK_HOME
└── app
    └── pitmark
        ├── README.md
        ├── babel.config.js
        ├── jest.config.js
        ├── node_modules
        │   ├── @babel
        │       ... 以下大量のライブラリ
        ├── package-lock.json
        ├── package.json
        ├── postcss.config.js
        ├── public
        │   ├── favicon.ico
        │   └── index.html
        ├── src
        │   ├── App.vue
        │   ├── assets
        │   │   └── logo.png
        │   ├── components
        │   │   └── HelloWorld.vue
        │   ├── main.js
        │   ├── router.js
        │   └── views
        │       ├── About.vue
        │       └── Home.vue
        └── tests
            └── unit
                └── example.spec.js

npm 関連

• pitmark/node_modules
• pitmark/package-lock.json
• pitmark/package.json

npm は package.json ファイルを読み込み、定義されているライブラリを node_modules ディレクトリにインストールします。そして実際にインストールしたバージョンを package-lock.json へ書き込みます。package-lock.json 最初から存在している場合はそちらに記述しているバージョンのライブラリをインストールします。こうすることで何度インストールし直しても同じ環境となるようになっているのです。

設定ファイル

• pitmark/.eslintrc.js
• pitmark/.gitignore
• pitmark/babel.config.js
• pitmark/jest.config.js
• pitmark/postcss.config.js

これは npm でインストールした各種ライブラリの設定ファイルです。本講座では基本的には変更はしません。（Vue CLI が基本的には変更の必要が内容に最初から設定してくれています）

public ディレクトリ

public ディレクトリには Node.js でコンパイルしない静的なファイルを配置します。画像ファイルなどのリソースもここに配置します。

src ディレクトリ

このディレクトリには Vue.js のソースコードを配置します。ここのコードに関しては開発を進めながら順次説明しますので、現時点では割愛します。

tests ディレクトリ

tests ディレクトリにはテストコードを配置します。本講座では後の章でテストに関して簡単に説明と実践を行います。

本パートで学んだこと

本パートでは以下のことを新たに学習しました。最後の確認にお使いください。

• Vue.js アプリケーションのファイル構成
• 各ファイル/ディレクトリの意味

以上で今回のパートは終了です。

お疲れ様でした。