ポートフォリオをVueで作るチュートリアル①

ここでいうポートフォリオは実績や作品（サイトやサービス）を1ページに乗せるサイトのことであり、実績や作品そのものではないことをご注意ください。

サイト仕様

・タイトル
・作品集（並べ替え）
・スキル
・自己紹介

身につくスキル

・Vueのファイル構成
・親コンポーネント、子コンポーネントでのデータの受け渡し
・methods・computedの違い、関数の作り方
・v-for、v-bind、v-onなどのディレクティブ
・並べ替え方法

このNOTEをやることで得られること

・Vueの基礎的かつ実践的な力
・就職・転職で使えるVueのポートフォリオ

特にVueを使用してる企業に行きたいならVueのポートフォリオはあった方がいいです。

実際に私も初Vueの現場での面談ではVueのポートフォリオでアピールして参画することができました。

また実際現場で使える親子間のデータの受け渡しも少ない学習コストで学ぶことができます。

ではまず、環境構築からやっていきましょう。

環境構築

ターミナルで以下を打ってください。

npm install -g @vue/cli@2.6.14

vue create vue-portfolio

以下聞かれます。

特に設定は必要ないので、デフォルトにします。

❯ default (babel, eslint)
Manually select features

cd vue-portfolio
npm run serve

以下のように表示されたらVue.jsの環境構築完了です。

http://localhost:8080/

次にvuetifyを追加します。

VuetifyはVueのbootstrapみたいなものです。

vue add vuetify

Still proceed? (y/N) 

? Choose a preset: (Use arrow keys)
❯ Default (recommended)
Prototype (rapid development)
Configure (advanced)

App.vueの不要な箇所を下記のように削除します。

App.vue

<template>
 <v-app> </v-app>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
 name: "App",

 components: {
   HelloWorld,
 },

 data: () => ({
   //
 }),
};
</script>

こうすると早速エラーが出てることがわかるでしょうか。

ターミナルに

12:5  error  The "HelloWorld" component has been registered but not used  vue/no-unused-components

というエラーが出るかと思います。

エラーの意味は、HelloWorldを読み込んでるけど使ってないよ！

という意味です。

Vue.jsをはじめJSフレームワークはこのくらいのことでもエラーが出て表示もされなくなってしまいますので注意しましょう。

これからHomeというトップページを作っていくのでHello WorldをHomeに変えていきます。

HelloWorldは消しておきます。

App.vue

<template>
 <v-app>
   <Home></Home>
 </v-app>
</template>

<script>
import Home from "./views/Home.vue";

export default {
 name: "App",
 components: {
   Home,
 },
};
</script>

またエラーが出ますが、Home.vueをまだ作ってないので当然ですね。

ではHomeを作っていきます。

viewsディレクトリを新規作成してHome.vueファイルを作ります。

<template>
 <div></div>
</template>
<script>
export default {
 name: "Home",
 components: {},
};
</script>

ここからVuetifyに則って実装して行きます。

<template>
 <v-main>
   <v-parallax
     dark
     src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
   >
     <v-row align="center" justify="center">
       <v-col class="text-center" cols="12">
         <h1 class="display-1 font-weight-thin mb-4">PORTFOLIO</h1>
         <h4 class="subheading">my portfolio</h4>
       </v-col>
     </v-row>
   </v-parallax>
 </v-main>
</template>

<script>
export default {
 name: "Home",
 components: {},
};
</script>

これでパララックスのメインビジュアルが完成です。

パララックスのソースは下記から持ってきています。

Parallax component — Vuetify.js

続いてworksセクションに移ります。

Works

Worksは実績を表示するセクションになります。

ここでは折角Vueを使ってるので、Vueが得意な絞り込みをしてみます。

さらにVueでは切っても切り離せない親と子の概念を学んでいきます。

ここが一番難しいところですが、ここを乗り越えれば簡単ですので一緒に頑張っていきましょう。

ちなみにMENTAをやってまして、契約いただいた方は無料でその他NOTEも読める券がもらえるので、よければぜひ！

ほしさんのプロフィール｜MENTA