[nuxt.js その２] 全体像の把握

物事を知るには大枠から

PHPのHelloWorldの時も同じく大枠の把握から入りました。
これは個人的な問題なのかもしれないですが、私は全体がどうなっているかをざっくり理解してからでないと、どうも頭の中が整理できないまま結局何もわからなかった　となりがちです。なのでまずは全体がどうなっているのかを調べました。

以下公式ページからの抜粋

ここについてはvue.jsと比較すると以下のような感じかな。

上図	vue .js	nuxt.js
Document	~/index.html	~/app.html　*1
Layout	~/App.vue	~/layouts/index.vue
Page	~/App.vue: <router-view/> *2	~/layouts/index.vue:<nuxt/>　*2

*1　デフォルトではファイルが存在しない
*2　描画したいファイルをルーターに定義すれば埋め込んでくれる

一度vueを触ったことあるから照らし合わせると非常に理解しやすい。
デフォルトでvuetifyできれいなレイアウトを生成してくれているので、pages/配下のファイルとルーターのカスタマイズで作っていくことにします。
Vue.jsではページを作成したらルーターの定義を自分で記述してあげる必要があったけど、nuxtはルールを守って~/pages配下にファイルを作成していけば勝手に作成してくれるみたい。ルーティングについて
例えば、~/pages/inspire.vueがデフォルトで生成されてるけど、このページには http://localhost:3000/inspire でアクセスできる。このルールは~/.nuxt/router.jsに生成されている。

試しに以下を作ってアクセスできることを確認した。

 ~/pages/
   └ sample/
     └ index.vue

 http://localhost:3000/sample/ 

 ~/pages/
   └ sample/
     └ sample.vue

 http://localhost:3000/sample/sample 

~/.vue/router.jsも自動で変わってる

export function createRouter() {
  return new Router({
    mode: 'history',
    base: decodeURI('/'),
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,

    routes: [{
      path: "/inspire",
      component: _1da4f318,
      name: "inspire"
    }, {
      path: "/sample",
      component: _43eed0fc,
      name: "sample"
    }, {
      path: "/sample/sample",
      component: _7cab1dac,
      name: "sample-sample"
    }, {
      path: "/",
      component: _49a418ec,
      name: "index"
    }],

    fallback: false
  })
}