みなさん、こんにちは。
春らしい陽気になったかと思えば、いきなり寒くなり、気温のアップダウンが激しい今日この頃です。
体調崩していませんか？
妻と娘が風邪をひきまして、「なんでパパだけ風邪ひいてないの⁉︎･･･あ、バカだからか！」と妻に
おちょくられた むつたく です。
・・・丈夫なんじゃい！！！

さて、Vue.jsについて第２回目（前回はこちら）になりますが、サンプルのプロジェクトを作成したかと思います。
今回はそのプロジェクトを掘り下げていこうと思ってます。
ターゲットはVue.js初心者、入門者になりますので、あしからず。

やること

• ディレクトリ構成と各ファイル説明
• ファイル解析
• ページ追加

ディレクトリ構成

vue create <ProjectName>を実行するとプロジェクトディレクトリが作成されました。
今回はプラグインを選択する際、デフォルト(babel/eslint)+Vue-Routerを選択した場合で、話を進めていきます。

ディレクトリ構成は、以下のような構成になっていると思います。

[cc_bash]
.git/ # バージョン管理システムGitのディレクトリ
node_modules/ # npm install コマンドでインストールしたnpmパッケージを管理するディレクトリ
public/ # webpackに処理されないアセットを格納するディレクトリ
├ favicon.ico # ファビコン
└ index.html # index.htmlテンプレート
src/
├ assets/ # webpackに処理されるアセットを格納するディレクトリ
├ components/ # UIコンポーネント(単一ファイルコンポーネント)
├ views/ # webpackに処理されるアセットを格納するディレクトリ
├ App.vue # 実行エントリポイントとなるコンポーネント
├ main.js # アプリケーションのエントリポイントのスクリプトファイル
└ router.js # Vue-Routerのルーティングファイル
.gitignore # Git の管理に含めないファイルを指定するためのファイル
babel.config.js # Babelの設定ファイル
package.json # npmのモジュール、タスク定義
package-lock.json # 依存パッケージが依存するパッケージのバージョン情報が変わる場合、package.jsonだけではnode_modulesを別環境で再現できなくなる。それを解決するためのファイル。
README.md # プロジェクトのREADMEドキュメント。npmコマンドの一覧が書かれている
[/cc_bash]

ここでは特に覚えておいて欲しいものを列挙します。

dist ディレクトリ

このディレクトリは、以下のコマンドを実行すると作成されます。

$ npm run build

ビルドが完了するとこのディレクトリにバンドルファイルが配置されます。
出力されたファイル一式を任意のサーバにデプロイすれば、一般への公開も可能です。

public ディレクトリ

webpackによって処理されないアセットを格納します。
何を言っているんだ･･･ということですが、publicディレクトリ内のリソースはwebpackによる処理はされず、distディレクトリにコピー、配置されます。
今回で言えば、publicディレクトリの配下に[favicon.ico]と[index.html]があると思います。
これらはそっくりそのまま、distディレクトリに配置(コピー)される訳です。

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

src ディレクトリ

webpackによって処理されるアセットを格納します。
publicディレクトリと反対、要は開発ディレクトリです。アプリケーションで使用する、jsファイルだったり、cssファイルだったり、vueファイルを配置してきます。

srcディレクトリの配下に別のディレクトリもありますね。assetsディレクトリ、compornentsディレクトリとviewsディレクトリ。

assets ディレクトリ

コンポーネント内で使用する画像ファイルやscssファイルを配置します。
srcディレクトリ配下なので、webpackによる処理を加えるファイルはこのディレクトリに格納します。

compornents ディレクトリ

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

views ディレクトリ

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

App.vue ファイル

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

main.js ファイル

Vueの基本設定ファイルです。App.vueをhtmlに紐付けます。
index.htmlに自動的に挿入される話を先ほどしましたが、このファイルのことになります。

router.js ファイル

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

こんなところでしょうか。
基本的にはNode.jsとかと一緒になると思います。
webpackが？？？な方は、こちらの記事を読んでみてください。むつたくはこれで理解できました。

ファイル解析

ここでは、public/index.html、src/main.js、src/App.vue、src/compornents/HelloWorld.vueの中身に触れていきます。
読み込み順的には、index.html -> main.js -> App.vue -> HewlloWorld.vueになります。

public/index.html

[cc_html5]