Nuxt.js入門④サイトのトップページを作って行こう!

app.htmlを作成しよう!


プロジェクトの第一階層にapp.htmlを作成します。

app.htmlの中に下記コードを記入して保存しましょう。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
 <head>
  {{ HEAD }}
 </head>
 <body {{ BODY_ATTRS }}>
  {{ APP }}
 </body>
</html>


{{ APP }}の中にこの後作成するlayoutが出力されます。

ページをを作成しよう!


pagesディレクトリの中にあるindex.vueを変更してサイトのトップページを作成していきましょう。

まずはテンプレートタグの中身から編集していきます。

<template>
  <section class="container">
    <div>
      <logo/>
      <h1 class="title">
        Pllogg
      </h1>
      <h2 class="subtitle">
        My phenomenal Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>


上記のような構成になっているかと思います。

このコードはサーバーを立ち上げて一番はじめに表示されるページです。

この部分を変更してトップページを作成していきます。

トップページの作成


ソースが少し長くなってしまったのでこちらにアップさせていただきました。

リンク先のソースコードをコピーまたはダウンロードしてindex.vueに反映してください。

現状ではscriptタグもstyleタグも使用しないので削除しておいてください。


反映したあとで、もし末尾に

fixable with the `–fix` option.

のような文章が含まれているエラーが表示された場合は

$ yarn run lint --fix


とすることで解決できます。

この状態でページを確認すると。


きちんとサイトのトップページが表示されていますね!

ページをパーツごとに分割していこう!


先ほど作成したindex.vueでも機能するのですが、コードが長くて読みづらいので、ヘッダーとフッターを分割してメンテナンス性の向上を測ります。

WordPressで言う所のheader.phpやfooter.phpなどと同じようなニュアンスです。

header.vueを作成しよう!

サイトを構成する部品はcomponentsディレクトリに格納します。

なのでcomponentsディレクトリの中にheader.vueを作成しましょう。

先ほど作成したindex.vueのナビゲージョン部分をheader.vueに移植します。

<template>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a
      class="navbar-brand"
      href="#">Pllogg</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarsExampleDefault"
         aria-controls="navbarsExampleDefault"
      aria-expanded="false"
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"/>
            </button>
    <div
      id="navbarsExampleDefault"
      class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a
            class="nav-link"
            href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#">Link</a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link disabled"
            href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a
            id="dropdown01"
            class="nav-link dropdown-toggle"
            href="http://example.com"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false">Dropdown</a>
          <div
            class="dropdown-menu"
            aria-labelledby="dropdown01">
            <a
              class="dropdown-item"
              href="#">Action</a>
            <a
              class="dropdown-item"
              href="#">Another action</a>
            <a
              class="dropdown-item"
              href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-3 my-lg-0">
        <input
          class="form-control mr-sm-2"
          type="text"
          placeholder="Search"
          aria-label="Search">
        <button
          class="btn btn-outline-success my-3 my-sm-0"
          type="submit">Search</button>
      </form>
    </div>
  </nav>
</template>

footer.vueを作成しよう!

header.vueの次はfooter.vueです。

こちらもheader同様にindex.vueのfooter部分を移植します。

<template>
  <footer class="container">
    <p>&copy; Company 2017-2018</p>
  </footer>
</template>

 
ここまで完成したらlayoutに配置していきます。

作成した部品を配置していこう!

ページの構成を宣言するファイルはlayoutsディレクトリの中に作成します。

今回は初期から作成されているdefault.vueを編集していきます。

<template>
  <div>
    <nuxt/>
  </div>
</template>


index.vueやheader.vueと違ってかなりスッキリしていますよね。

layoutはページを構成する部品の配置指定するためのものなので、
基本的には細かいコードを書くことは少ないです。

この中に記入されている<nuxt/>というタグの部分に、先ほど作成してpageディレクトリのindex.vueが挿入されます。

<nuxt/><nuxt></nuxt>同じ意味を持ちます。

タグの間に記入する要素がない場合は<nuxt/>のように書いておかないとプロジェクト作成編でインストールしたJavaScript構文チェックツールによってエラーが発生するので注意しましょう。

この条件はspanタグやpタグのように他のタグでも同様です。

<nuxt/>タグを使用するのはlayoutsディレクトリの.vueファイルのみとなります。


Bootstrapを使用して構築しているので<style>タグとその中身は削除しておきましょう。

<template>
  <div>
    <partsHeader/>
    <nuxt/>
    <partsFooter/>
  </div>
</template>

<script type="text/javascript">
import partsHeader from '~/components/header.vue'
import partsFooter from '~/components/footer.vue'
export default {
  components: {
    partsHeader,
    partsFooter
  }
}
</script>


最終的にはこのような形のコードになります。

 表示までの流れ


まずは10,11行目に書いているimportでheader.vueをpartsHeaderとしてfooter.vueをpartsFooterとして読み込みます。

その後12行目のexport default でpartsHeaderとpartsFooterわたします。

受け取ったデータを 3行目 <partsHeader/> 5行目 <partsFooter/> として配置しています。

この状態でサイトにアクセスすればきちんとトップページが表示されているはずです。

あとがき


layout component page と各.vueファイルを編集して来ましたがどれも基本的な書き方は同じでです。

layout ページ全体の配置
page ページのメインコンテンツ
component ヘッダーなどのページの部品


このようなニュアンスで覚えておけば大丈夫です。

次回はブログの記事詳細ページを作成していきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です