ポートフォリオを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/


画像1


次にvuetifyを追加します。

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

vue add vuetify


Still proceed? (y/N) 



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

画像2


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>


画像3

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

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

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

Works

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

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

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

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


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


ここから先は

0字

Vue.jsで作るポートフォリオ ・Vuetify ・親子コンポーネント ・実績のソート機能 などを学びながらポートフォリオを作成すること…

この記事が気に入ったらチップで応援してみませんか?