Nuxt.jsの基礎勉強-ファイル構造の理解を深める-

Nuxt.js Vue.js

はじめに

前回Nuxt.jsを勉強した際にはファイル構造や知識の追加だけだったので今回は実際に動かしてみたので行なったことについて纏めていく。

今回勉強した内容は以下のリポジトリにあげております。 github.com

componentsとpageについて

この二つがMVCのVに相当する部分になり、コンポーネントと各ページの出力を担うvueファイルを夫々纏めて管理することができる。

  • componenntsの基本構文は以下のように記述する
<template>
  <div class="Hello">
    Hello Nuxt.js
  </div>
</template>

<script>
export default { }
</script>>

<style>
.Hello {
  color: brown;
}
</style>

<template>
  <section>
    <hello />
  </section>
</template>
<script>
import hello from '~/components/hello.vue'

export default {
  components: {
    hello
  }
}
</script>

このように記述することで、ページ内にhelloコンポーネント内の記述がpage側で処理されてHello Nuxt.jsを出力することができる。

デフォルトのページデザインを弄る

layoutsについて

layouts/default.vue内のコードを弄ることでデフォルトのデザインを変えることができます。

<template>
  <div>
    <div class="header">
      <h1 class="header">This is First Nuxt.js</h1>
    </div>

    <Nuxt />
  </div>
</template>

<style>
.header{
  color: #fff;
  background-color: black;
}
~略~

上記のように記述することでヘッダーを全てのページのデフォルトとして付け足すことができる。

<Nuxt />が各ルートで呼ばれるページを出力する場所なので、これを消すと各ページの中身が消えてしまうので注意が必要。

nuxt.config.js

ここではアプリ内に使う外部ツール等の設定やHTMLの<head>記述を纏めています。公式参照

今回はテスト的にGoogle Fontsを使うようにコードを記述してみます。

  • nuxt.config.js
  head: {
    ~中略~
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Sriracha&display=swap'}
    ]
  },
  • layouts/default.vue
html {
  font-family: 'Sriracha', cursive;
~中略~
}

とすることで、デフォルトのフォントが変更される。

アプリのルートについて

ルート割り当てについて

アプリのルートは~/page/に入っているvueファイルの名前によって自動的に作られ、同名のvueファイルと関連付けがされます。

  • 例1) ~/page/index.vueとすると/が自動的に作られる
  • 例2) ~/page/second-pageとするとsecond-pageが割り当てられる

同様に階層を深くしたりしても自動的にその階層をルートとして割り当ててくれる。

ページ遷移について

Nuxt.jsではvue-routerを用いてページ遷移を行うので<router-link>タグを使うことで遷移ボタンを作成できる。

<template>
    <section>
        <router-link to="/">Top</router-link>
        <router-link to="second-page">second-page</router-link>
    </section>
</template>>

assetsについて

ここに画像ファイル等を置くことで管理しやすくしている。

終わりに

今回は以前勉強したディレクトリ構造からより理解を深めるために練習用のプロジェクトを作って使ってみることでNuxt.jsの概要をつかむことができたと思う。

次回はvuexを用いたデータ操作について勉強しようと思う。