その2です。今回さわさわするのはviewフォルダの中にある「xxx.vue」ファイルと「main.js」と「router.js」。あと、テンプレートとして使っている「App.vue」ファイルですね。
まずはこいつらの使い方を押さえておけば、簡単なアプリケーションは作れそうです。ではさっそくみていきましょう。
ステップ１：まずは要素を抑えよう
vue-cliは色々とファイルやらフォルダを自動で作っちゃいますので、最初は迷子になりますよね。ので、ちょいとまとめておきます。
・main.js パッケージとかの使い方をまとめておくjsファイル
・router.js URLパスを定義するjsファイル
・App.vue 共通の要素を管理するvueファイル
・viewフォルダの中の.vueファイル ページごとに表示する内容をまとめたvueファイル
ここら辺が核になってくるファイルです。railsアプリのフォルダ軍よりは見通し良いですね（MVCでわかれて作らないメリットでしょう）w
##ステップ２：router.jsの中身をみておく。
router.jsはURLパスがまとまっているファイルです。
ここを見ればどんな風にサービスを構築七えるのか大体わかりますね。
出来立てほやほやの今はHomeとaboutの二つだけしかありません。
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
ちなみに「mode:history」で#ではないURL遷移を実現しています。
SEO周り考える場合には必須になってきますね。
##ステップ３：main.jsをチラ見しておく。
main.jsをちらっと見てみましょう。以下のようになっているはずです。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
ポイントはApp.vueをAppの名前で、render: h のところで使っているという点。
このAppをヘッダーとして、#appのidの個所にくっつけることを意味しています。
今のところシンプルな記述です。が、追々package周りをいれていくとここが肥大化してまりります。それは追手のお楽しみということで。
##ステップ４：App.vueに超簡易なFooterを作ってみる
では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>
</div>
</template>
とてもシンプルですね！
共通のヘッダというよりは共通のファイルと考えていただいたほうが良いです。
<router-view/>のところに、viewsファイルのvueファイルのtemplateが入ってきます。ここにちょっとだけ手を加えてみます。以下のように追記してください。
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<div id="footer">
oreorecompany@copyright
</div>
</div>
</template>
ではここまできたらサーバーを起動してみましょう。アプリのディレクトリに入るのをお忘れなく。
~/vue/app/my-app$ npm run serve
画面を見るとこんな感じですね。
画面では切れちゃってますが、「oreorecompany」がページの一番下に表示されているはずです。
どういった条件で表示されているのでしょうか？
router.jsを見るとわかります。抜粋すると以下のような記述になっていますね。
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
大切なのは「routes:」の個所。「path:」がURLパス。「name:」が管理する名前。「componnent:」がどのvueファイルを表示に使うのかを指定しています。
今回componentに「Home」を指定していますね。
で、この「Home」は「import Home from './views/Home.vue'」と定義しています。viewsフォルダの中にあるHome.vueをHomeという名前で使うよーというわけです。
ではHome.vueはどんなことがかかれているのでしょうか？みていきましょう
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
templateに書かれている内容は、先ほど見た画面そのものですね。これが表示されているイメージは湧くと思います。ですが、先ほどの画面にはそれ以外の要素も表示されていました。
黄色い枠でかこっている奴らです。
これは以下の個所で指定している内容です。
<HelloWorld msg="Welcome to Your Vue.js App"/>
とても短い記述ですが、何やら画面をみるとがっつりと表示されていますね。
この<HelloWorld msg ~ >はどこからきているのでしょうか？
ヒントはHome.vueファイルの以下の個所にありました。
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
ここでHelloWorldを「import HelloWorld from '@/components/HelloWorld.vue'」
と指定しています。componentsフォルダの中のHelloWorld.vueファイルですね。
こいつをみてみると以下のようなスクリプトになっています。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
</ul>
<h3>Essential Links</h3>
***
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
ひとまず、<template>部分はわかりやすいとおもうので華麗にスルーします。
<script>部分にpropsが出てきました。何やらこの中に「msg」を指定しています。
このmsgを、画面に表示するときにはの中に{{msg}}と記載します。ちなみに、このmsgは変数のような形で設定しています。
そういえば、Home.vueファイルに<HelloWorld msg="Welcome to Your Vue.js App"/>のように「msg=""」と書いていましたね。これがmsgとしてHelloWorld.vueの{{msg}}に表示されます。
##ステップ５：componentの中にvueファイルつくってみるよ
router.jsとmain.js、そしてcommponentsとviewsの連携のイメージがつけばOKです。色々実験してみましょう。試しにmyprof.vueというファイルをcomponentsフォルダの
中に作ってみます。
以下のように書いてみましょう。
<template>
<div id="myprof">
<p>お名前：</p>
<p>お住まい：</p>
</div>
</template>
<script>
export default {
name: 'Myprof',
}
</script>
作成できたら、これをAbout.vueファイルの中で表示させてみましょう。
About.vueを開き、以下の内容を追記してください。
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
<Myprof/>
</template>
<script>
import Myprof from '@/components/Myprof.vue'
export default {
name: 'about',
components: {
Myprof
}
}
</script>
componentsでMyprofを呼び出していますね。そして、このMyprofは「import Myprof from '@/components/Myprof.vue'」と定義しています。
実際にページを見てみましょう。ちゃんとMyprof.vueの記載内容がAbout.vueの中に反映されていますね。
##まとめ
componentsの使い方のイメージがつきましたでしょうか？どれくらいの粒度にしてこのcomponentsを作るかは開発する人の好みだったりします。
ただ、個人的にはあんまりcomponentは増やさない主義です。単一ページでソースを一括管理できるのがvueの魅力だと思うので。
次回はfirebaseをさわさわしていきます。