ポートフォリオを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の環境構築完了です。
次に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>
これでパララックスのメインビジュアルが完成です。
パララックスのソースは下記から持ってきています。
続いてworksセクションに移ります。
Works
Worksは実績を表示するセクションになります。
ここでは折角Vueを使ってるので、Vueが得意な絞り込みをしてみます。
さらにVueでは切っても切り離せない親と子の概念を学んでいきます。
ここが一番難しいところですが、ここを乗り越えれば簡単ですので一緒に頑張っていきましょう。
ちなみにMENTAをやってまして、契約いただいた方は無料でその他NOTEも読める券がもらえるので、よければぜひ!
ここから先は
Vue.jsで作るポートフォリオ
Vue.jsで作るポートフォリオ ・Vuetify ・親子コンポーネント ・実績のソート機能 などを学びながらポートフォリオを作成すること…
この記事が気に入ったらチップで応援してみませんか?