Vueプロジェクトファイルを確認してみた件

Vue-Cliを使いプロジェクトのパッケージがインストール完了すると。様々なファイルがインストールされたことがわかるかと思います。全てを解説すると長くなってしまうのでまずは、主要なファイルの説明を簡単にしていきたいと思います。

どうやって表示されているか

まずはVue.Jsがどのようにブラウザに表示させているかを把握しましょう。
– public / index.html
このファイルが最終的な結果を描画するファイルになります。

<div id=”app”></div>

このタグの中にコンポーネントがネストされブラウザに描画されます。

src / main.js
このJSファイルがVueのインスタンスを作り、他のファイルを読み込み、最終的に描画関数を使いindex.htmlにデータを流しています。

new Vue({  
　　router,
　　store,
　　render: h=> h(App)
}).$mount(‘#app’)

routerはルーティングの設定、storeが状態の設定、AppとなっているファイルがVueのコンポーネントになっています。
描画のために次に呼び出されているのはApp.vueファイルのようですね！

src / App.vue

<template>
　　<div id=”app”>
　　　　<div id=”nav”>
　　　　　　<router-link to=”/”>Home</router-link> |
　　　　　　<router-link to=”/about”>About</router-link>
</div>
<router-view/>
</div>
</template>

App.vueの中では「router-link」「router-view」という初めての人はみたことのないタグが見つけられるかと思います。これはVue Routerのコンポーネントを呼び出しています。初期のインストールの際に一緒にインストールしたため最初からリンク設定にVue Routerが使われているのです。
router-viewタグはsrc / router.jsで読み込んだコンポーネントをここに呼び出します。
表示されているコンポーネントは src / views / フォルダに格納されているファイルを呼び出しています。
headerやfooterのタグやCSSは App.vueで設定していきましょう。

src / views フォルダでは先に話したとおり描画されるvueコンポーネントファイルが格納されていますApp.vueファイルもそうでしたが.vue拡張子のファイルは全て先頭の文字が大文字で表記するルールになっています。小文字でもファイルの読み込みには問題ないようですが、フレームワークの統一ルールと言ったかんじでしょうか。調べる機会があれば調べてみたいと思います。

src / components フォルダではviewsフォルダで表示されているページの中身が格納されています。
ルーティングの設定ファイルをviewsで作りそれぞれの内容がcomponentsフォルダに格納されている形になっています。

このようにコンポーネントにそれぞれの役割をもたせ細分化していくことで開発をスムーズに進める工夫がされています。5ページ、10ページという風にページを拡張して行く際はフォルダの区分などの設計をしっかりして行くことで、どこになんの役割のコンポーネントが格納されているかが明確にできますね。