Help us understand the problem. What is going on with this article?

【Vue.js+Vuetify+vue-router】クリスマスに暇な新卒エンジニアが初めてポートフォリオを作成してホスティングしてみた

More than 1 year has passed since last update.

はじめに

この記事は駆け出しエンジニア Advent Calendar 2018の24日目の記事です。

24日目と言っても、参加者が全然おらず実質1日目の記事になります。

駆け出しエンジニアのAdvent Calendarですが、筆者は新卒未経験でエンジニアになったので9ヶ月経っています。
駆け出し名乗っていいのかは置いておき今回はタイトル通りVue.js + vue-router + Vuetify.jsを用いてSPAのポートフォリオを作成して、github pagesにホスティングしたのでその流れと苦労を投稿しようと思います!

初心者が初めてvue.jsを触ってみるの地味な続編となっております。

基本的には今回@plus_kyotoさんのフロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話をとても参考に真似させていただきました。ありがとうございます。

完成品ポートフォリオ
Github

インストール

node.jsがインストールしてある前提です。


$ npm -g install vue-cli
# vue init webpack my-project

Project name my-project
? Project description A Vue.js project
? Author USER_NAME <MAIL_ADDRESS>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Should we run `npm install` for you after the project has been created? (recommended) npm

# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

今回はテストとLinterは外しています。
npm run devをすると

Your application is running here: http://localhost:8080

と表示されたのでアクセスするとERR_SOCKET_NOT_CONNECTEDのエラーが。
どうやら社用パソコンのセキュリティソフトが悪さをしているそうなので
config/index.jsを書き換えます。

index.js
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port:5678, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

もう一度npm run devをすると

Your application is running here: http://localhost:5678

アクセスします。

スクリーンショット 2018-12-18 18.22.38.png

うまくアクセスできたようです。

実装

下準備

  • コンポーネントとページのディレクトリを分けるために、pagesディレクトリをsrc直下に作ります。
  • vuetifyを使うために以下のようにmain.jsを書き換えます。
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'

その後動くかの確認のためにトップページにhello worldと表示するようにしてみます。
pagesディレクトリの中にtop.vueを作成します。

top.vue
<template>
  <h1>
    hello world
  </h1>
</template>

<script>
  export default {
    data () {
    }
  }
</script>

そしてルーティングの設定を書き換えます。route/index.jsでルーティングの設定は行われているので

index.js
import Vue from 'vue'
import Router from 'vue-router'
import top from '@/pages/top.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: top
    }
  ]
})

ルートディレクトリはcomponents/HelloWorld.vueをimportしていましたがtop.vueに変更。
これで読み込むと

スクリーンショット 2018-12-19 10.42.14.png

しっかりhello worldと表示されていますね。
これで下準備は完了です!

コンポーネント作成

今回はなるべくコンポーネント化したかったのでまずはヘッダーから作成していきます。

<template>
  <v-toolbar
  dense
  color="black"
  ripple
  style="height: 70px;"
  >
    <v-layout justify-center fill-height>
      <v-toolbar-items class="hidden-sm-and-down">
        <!-- なぜか下のスタイル内では効かないためボタンごとにベタで高さ調整 -->
        <router-link to='/' class="link">
          <v-btn
          flat
          color="white"
          style="height: 70px; width: 100px; font-weight: bold;"
          >
            Top
          </v-btn>
        </router-link>
        <router-link
          class="link"
          v-for="item in items"
          :key="item.to"
          :to="item.to"
        >
          <v-btn
          flat
          color="white"
          style="height: 70px; width: 100px; font-weight: bold;"
          >
            {{ item.to }}
          </v-btn>
        </router-link>
      </v-toolbar-items>
    </v-layout>
  </v-toolbar>
</template>

<script>
export default {
  name: 'myHeader',
  data: () => ({
      items: [
        {to:'Profile'},
        {to:'Skill'},
        {to:'Works'},
        {to:'Contact'},
      ]
    })
}
</script>

<style>
.link {
  text-decoration: none;
}



</style>

vuetifyのツールバーを使っています。
また、リンク先のtoと表示項目を同じにすることでループを回すことでボタンを増やしていくという算段です。
なぜかstyleタグ内でのCSSがうまく効かなかったのでベタ書きなのと、router-linkのtoをバインディングするためにコロンをつけなければいいけないのを忘れていて引っかかりました。

そして作成したヘッダーを表示するためにsrc/main.jssrc/App.vueを書き換えていきます。

App.vue
<template>
  <div id="app">
    <headers></headers>
    <div id="content">
      <img src="./assets/logo.png">
      <router-view/>
    </div>
  </div>
</template>

<script>
import headers from './components/header.vue'
export default {
  name: 'App',
  components: {
    headers,
  }
}
</script>

App.vueでは作成したコンポーネントを使用できるようにimportします。

main.js
Vue.use(Vuetify, {
 iconfont: 'fa'
})

main.jsにはこの文を追記します。
これ以降の開発は冗長になってしまうので割愛します。
githubをみていただけるとわかると思います。

この要領でフッターを作成し、ヘッダーのtoに当たるページを作成し、ページ内で使用するコンポーネント作成等を行って最終的にできたトップページがこちらです。

スクリーンショット 2018-12-19 11.02.48.png

背景画像はvurtifyからかっこいい画像を拝借しました。

ホスティング

今回はGithub Pagesに、gh-pagesを使ってホスティングしました。

$ npm install gh-pages

これでインストールできます。

そしてpackage.jsonを書き換えます。

package.json
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js && gh-pages -d dist/",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
    "gh-pages": "^2.0.1",
    "material-design-icons-iconfont": "^4.0.2",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuetify": "^1.3.5"
  },

これでデプロイします。

ただこれだけではcssとjsの読み込みがうまくいかないため@uriuriuriuさんの
webpackでgithub pagesをdeployする際のハマりどころ(vue.js)
vue-routerのgithub-pages用設定
を参考にしました。

ざっくり噛み砕くと、gh-pagesのためにできたdistディレクトリ内のindex.htmlに記載してあるCSSやJSへのパスが相対パスで、dist/staticに飛んで欲しいのにプロジェクト直下のstaticを読み込もうとしていたエラーでした。

振り返って

よかった点

  • 新しい技術を触るのは純粋に楽しかった
  • ビルド、デプロイ、パスなどあまり意識できてなかったところが弱点としてわかった
  • へなちょこ作品でも達成感があった

苦労した点

  • 普段JSにめちゃくちゃ慣れている人間ではないので最初の理解が難しかった
  • vuetifyが英語と日本語ごちゃ混ぜのドキュメントで理解に苦しんだ
  • 誰にも何も聞かずに公開まで持っていくのは初めてだったので色々と苦労することが多々あった

参考

Vue.js公式ドキュメント
Vuetify公式ドキュメント
@plus_kyotoフロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
@uriuriuriuwebpackでgithub pagesをdeployする際のハマりどころ(vue.js)
@uriuriuriuvue-routerのgithub-pages用設定
@gcsungwooVue.js概要【初心者】
@567000Vue.js を vue-cli を使ってシンプルにはじめてみる
@567000Vue-routerを使って、SPAをシンプルにはじめてみる

kazuki5555
PHPとかLaravelとかDockerとかGCPとか PythonかじったりGoかじったり
https://kazuki5555.github.io/Portfolio/#/
cgate
クリーンなアドテクノロジーを目指して、安心して利用いただけるサービスを!
https://www.cgate.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした