当ブログ人気記事!
転職体験談
Laravelで学ぶWebアプリ開発
誰でも作れるチャットアプリ
未経験への勧め

【Nuxt×Vuetify×Netlify】Myポートフォリオサイト作成(ヘッダー・フッター・ページ内遷移)

プログラミング

ポートフォリオサイトを作ってみたいー!
公開までの方法が知りたい!

本記事はこういった悩みに対しての記事です!


この記事を書いている僕(@Shoot58153748)は、
2020年4月現在メガベンチャーの社内スタートアップの部署で
エンジニア(2年目突入)をしており、

プログラミング未経験からメガベンチャーへの転職を成功させた経験・ノウハウ
Webエンジニアになってから学んだこと

をブログにまとめています。



今回は
固定ヘッダーとフッダーを作成します!

前回記事はこちら(Nuxtインストールと画面設計)

学びポイントを以下にまとめました。
是非参考にしてください!

今回のポイント

  • ヘッダー
  • フッター
  • ナビゲーションメニュー
  • ページ内遷移


本ブログポートフォリオサイト作成チュートリアル
https://kumatetsublog.com/nuxt-vuetify-netlify-portfolio-tutorial

SHOOTのポートフォリオサイト
https://shoot-portfolio.netlify.com

Github
https://github.com/Shuto-san/laravel-vue-docker

スポンサーリンク

固定ヘッダーと固定フッター実装フロー

実装方針まとめ

  • 画面の実装はVuetifyを使用
  • メニューをクリックしたらナビゲーションメニュー出現
  • ページ内遷移はライブラリvue-scrollto.jsで実現
  • ヘッダー→v-app-barタグ
  • ナビゲーションメニュー→v-navigation-drawerタグ
  • フッター→v-footerタグ

ページ内遷移ライブラリインストール

yarn add vue-scrollto

編集するファイル

layouts/default.vue:全ページ共通のレイアウト
plugins/vue-scrollto.js:プラグイン設定
nuxt.config.js:プラグイン登録


Nuxtプロジェクトのディレクトリ構成は以下になります。
※選択されているファイルがポートフォリオ作成にあたり編集または新規作成が必要なファイルです。

ソースコード

※ソースコード内で解説してます!

plugins/vue-scrollto.js

import Vue from 'vue' // vueのインポート
import VueScrollTo from 'vue-scrollto' // 先ほどインストールしたライブラリをインポート

// ライブラリの登録+オプション
Vue.use(VueScrollTo, {
  duration: 700,
  easing: [0, 0, 0.1, 1],
  offset: -100
})

layouts/default.vue

<template>
    <v-app v-cloak>
    <!-- ヘッダー(app:コンテンツの幅を自動調整&固定) -->
      <v-app-bar
      app
      color="indigo"
      style="color: white"
      >
        <v-app-bar-nav-icon color="white" @click="drawer = true"></v-app-bar-nav-icon>
        <v-toolbar-title>
          SHOOT's Portfolio
        </v-toolbar-title>
        <v-spacer />
      </v-app-bar>
      <!-- ヘッダー終わり -->

      <!-- ナビゲーションメニュー(drawer(変数):メニュー表示・非表示を制御) -->
      <v-navigation-drawer
         v-model="drawer"
         fixed
         temporary
       >
         <!-- メニューのリスト化 -->
         <v-list
           nav
           dense
         >
           <!-- リストのグループ化 -->
           <v-list-item-group
             v-model="group"
             active-class="indigo--text text--accent-4"
           >
            <!-- アイコン&文字列:クリック遷移設定(それぞれのコンポーネントへページ内遷移) -->
            <nuxt-link v-scroll-to="'#profile'" to>
             <v-list-item>
               <v-list-item-icon>
                 <!-- mdi-XXX:アイコンを指定できる(material design iconで検索!) -->
                 <v-icon>mdi-account</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   profile
               </v-list-item-title>
             </v-list-item>
            </nuxt-link>
       <!-- vue-scrollto.jsの使用(v-scroll-to, ページ内のid(history)に遷移 -->
            <nuxt-link v-scroll-to="'#history'" to>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-history</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   history
               </v-list-item-title>
             </v-list-item>
            </nuxt-link>
            <nuxt-link v-scroll-to="'#work'" to>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-folder</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   work
               </v-list-item-title>
             </v-list-item>
            </nuxt-link>
            <nuxt-link v-scroll-to="'#contact'" to>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-email</v-icon>
               </v-list-item-icon>
               <v-list-item-title>
                   contact
               </v-list-item-title>
             </v-list-item>
             </nuxt-link>
           </v-list-item-group>
         </v-list>
       </v-navigation-drawer>
      <!-- ナビゲーションメニュー終わり -->

      <!-- ページ埋め込み(pages/*.vueの内容が埋め込まれる) -->
      <v-content
      fluid>
          <nuxt />
      </v-content>

      <!-- フッター(app:コンテンツの幅を自動調整&固定) -->
      <v-footer
      app
      color="indigo"
      >
      <v-spacer />
      <span style="color: white">&copy; 2020 Shuto Matsuyuki. All Rights Reserved.</span>
      </v-footer>
      <!-- フッター終わり -->
    </v-app>
</template>

<script>
export default {
  data () {
    return {
          drawer: false,
          group: null,
    }
  }
}
</script>
<style>
/* コンパイルされていない変数を隠す設定 */
[v-cloak] {
  display: none;
}
/* リストのレイアウト、色修正 */
.v-application a {
    color: black;
    text-decoration: none;
}
/* ボタンのホバー設定 */ 
.theme--light.v-btn:hover::before {
    opacity: 0.2;
}
</style>

nuxt.config.js

...


  plugins: [
      // プラグイン登録
      '~/plugins/vue-scrollto' 
  ],

...

まとめ

以上、ポートフォリオサイトのヘッダーとフッターを作成しました!


最後に本記事でのポイントをまとめますと、、

ポイント

  • ヘッダー
  • フッター
  • ナビゲーションメニュー
  • ページ内遷移



次回は、トップコンポーネントを作成していきます!
作成前に使用する画像と文字を決めておくと迷わずに済むかもしれません。




ポートフォリオサイトの作成〜公開までのプロセス(全8回)
を全て記事にしているので是非参考にして独自のポートフォリオを作ってみてください!

プログラミング
スポンサーリンク
シェアする
SHOOTをフォローする
末っ子WebエンジニアSHOOTのブログ

コメント

タイトルとURLをコピーしました