Nuxt.js + Vuetify でポートフォリオ作りたいその1 #JavaScript

はじめに

いろいろな方の記事を見ている中で自分もポートフォリオを作ってみようと思いたちました。
最近の業務にてVue.jsを使っているので、勉強がてらVue.jsをチョイス。
それとせっかくなので、Vue.jsのフレームワークの勉強もしようということでNuxt.jsを。
ついでにレスポンシブ対応も勉強しとこかなということでVuetifyを触れてみることにしました。

とりあえずプロジェクト作ってみる

consoleにて任意のディレクトリに移動後、以下コマンドを叩きNuxtのプロジェクトを作成します。

$ npx create-nuxt-app my-portfolio

途中で初期設定を質問されるので、ひとまず以下の通り回答。

? Project name my-portfolio
? Project description My polished Nuxt.js project
? Use a custom server framework express
? Choose features to install Linter / Formatter, Prettier, Axios
? Use a custom UI framework vuetify
? Use a custom test framework jest
? Choose rendering mode Universal
? Author name hiroki ueno
? Choose a package manager npm

ありがとうGoogle先生。

プロジェクト名は何にする？

プロジェクトの説明文は何にする？

サーバー側のフレームワークは何にする？ → とりあえず使うかわからないけどexpressを選んどこ。。。

インストールする機能は何にする？→ Linter / Formatter, Prettier あたりいれとけばフォーマット周りは大丈夫かな…? ついでにaxiosもいれとこ

UIフレームワークは何にする？ → vuetify！

テストフレームワークは何にする？ → あんまりJavaScript界隈のテストフレームワークは詳しくないので...持っていた参考書に乗ってたJestを選択。

rendering modeは何にする？ → SPAかUniversalを選択。今回はひとまずUniversalで。

作成者名を入力

パッケージマネージャは何にする？

で終わってしばらく待つとプロジェクトができています。

とりあえず動かしてみる

とりあえず起動して画面を見てみます。

npm run dev

http://localhost:3000/ にアクセスすると以下のような画面が表示されます。なんかすでにかっこいい。

とりあえず雛形はできたので、生成されたソースを参考にしつつ使わない部分を削り取って作っていく感じでいきます。

とりあえずレイアウトを弄ってみる

ではとりあえずレイアウト周りをいじってみます。

プロジェクト全体のベースカラーはplugins/vuetify.jsにて調整できるようです。

plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: colors.blue.darken2,
    accent: colors.grey.darken3,
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
  }
})

それぞれの色の定数についてはVuetifyのドキュメントをご参照ください。
https://vuetifyjs.com/ja/framework/colors
ひとまずテーマが決まっていないのでそのままで行きます。

初期画面で表示されているヘッダーやフッター、サイドバーなど、ページ共通のレイアウト周りはlayouts/default.vueにて実装されています。
ヘッダーの不要なボタンとかを削除してサイドバーのメニューに項目の追加を行ってみます。

layouts/default.vue

<template>
  <v-app light>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-tile
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.title" />
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar :clipped-left="clipped" fixed app>
      <v-toolbar-side-icon @click="drawer = !drawer" />
      <v-toolbar-title v-text="title" />
      <v-spacer />
    </v-toolbar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-footer :fixed="fixed" app>
      <span>&copy; 2019 h-ueno</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'home',
          title: 'Index',
          to: '/'
        },
        {
          icon: 'person',
          title: 'profile',
          to: '/profile'
        },
        {
          icon: 'list_alt',
          title: 'articles',
          to: '/articles'
        }
      ],
      miniVariant: false,
      title: 'H-UENO'
    }
  }
}
</script>

v-appタグをlightにするとテーマが白くなります。
itemsにサイドバーのメニューに表示する項目を設定します。jsonで別ファイルに持たせたほうが後々良さそう。
itemsのiconに関しては以下に対応しています。 https://material.io/tools/icons/?style=baseline
<nuxt />の箇所にitemsのtoで設定されたルーティング先のページを表示されます。

ついでに遷移先のページを作成しておきます。
遷移先のページはpagesディレクトリ以下に作成します。

pages/profile.vue

<template>
  <div>MyProfile</div>
</template>

pages/articles.vue

<template>
  <div>なんか記事を表示したい</div>
</template>

ひとまず、現段階のソースで表示させてみます。

profile

プロジェクト立ち上げて、簡単な設定するだけでそれっぽい画面になるのほんとすごい。

画像表示させてみる

せっかくなので我が家の愛娘を表示させてみようかなと思いました。
画像をassetsディレクトリ以下に置きます。

pages/index.vueを変更します。

pages/index.vue

<template>
  <div class="contents"></div>
</template>

<style>
.contents {
  height: 100vh;
  width: 100vh;
  background-image: url('~assets/cat.jpg');
}
</style>

表示してみます。

ああ＾〜かわいいんじゃあ＾〜まじ天使
（ホントは背景全面に表示させてみたかったけどそんな超解像度の写真がなかった。。。

サイドバーの動作を変更してみる

もうこれだけで今日は満足感MAXでしたが、
ついでに、サイドバーのメニューを押してページ遷移した後もサイドバーが開きっぱなしだったのが気になったのでこれも直しておきます。

layouts/default.vue

... 略
        <v-list-tile
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
+          @click="drawer = !drawer"
        >
... 略

とりあえずこれで今回はこれでお腹いっぱいになったので、次回以降にページを作り込んでいきます。
目標としてはもっとVuetifyの要素を勉強して使っていきたいです。

参考にさせていただいた方々

Nuxt.js + Vuetify + Netlify でポートフォリオサイトを作ってみた
 Nuxt.jsでポートフォリオサイトを作製する
 Nuxt.jsで実践的にポートフォリオサイトを作る part1〜他サイトのパクリ方入門〜
【Ch.2】プロジェクトを作成する【Nuxt de Portfolio】

Nuxt.js + Vuetify でポートフォリオ作りたい その1