教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
本パートではデフォルトのトップページを変更して以下のようなページを実装します。
プロジェクトの雛形の作成が完了しましたので、実際にコードを修正します。Vue.jsのプロジェクト内のフォルダ構成は下記画像のようになっています。今回修正するのは、srcディレクトリ以下となります。
では、ポートフォリオページ内で使用するアイコン画像を、srcディレクトリ内に、「icon_image.png」という名前で保存してください。(ファイル名、拡張子は変更しないでください)
以降のターミナルで実行するコマンドはすべて、「portfolio-deploy-automation」リポジトリ内直下で実行する想定です。cdコマンド等でリポジトリ内に移動をお願いします。
Copied!# icon_image.pngファイルが作成されているか確認
# icon_image.pngが出力されていれば、問題ありません
$ ls -1 src/ | grep icon_image.png
icon_image.png
次に、src/App.vueファイルを修正します。
下記コードすべてををsrc/App.vue内に上書きしてください。(既存のコードが消えても問題ありません)
Copied!src/App.vue
Copied!<template>
<v-app>
<v-container>
<v-row
no-gutters
>
<v-col>
<div class="display-1 pl-3 pt-3 pb-3 port-title">マイポートフォリオ</div>
</v-col>
</v-row>
<v-row
no-gutters
>
<v-col class="col-4">
<v-container fluid="">
<v-row justify="center">
<v-img
:src="require('@/icon_image.png')"
max-width="250">
</v-img>
</v-row>
<v-row justify="center">
<p class="display-1 mt-4">XX_ここに名前を入力します</p>
</v-row>
<v-row class="">
<v-col class="col-2">
</v-col>
<v-col>
<p class="title">Twitter</p>
</v-col>
<v-col justify-self="center">
<v-btn href="https://twitter.com/?lang=ja" target="_blank" text>
<v-icon color="#55acee" x-large>mdi-twitter</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col class="col-2">
</v-col>
<v-col>
<p class="title">Facebook</p>
</v-col>
<v-col>
<v-btn href="https://www.facebook.com/" target="_blank" text>
<v-icon color="#3b5998" x-large>mdi-facebook</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col class="col-2">
</v-col>
<v-col>
<p class="title">GitHub</p>
</v-col>
<v-col>
<v-btn href="https://github.com/" target="_blank" text>
<v-icon color="black" x-large>mdi-github</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-col>
<v-col>
<v-row>
<v-col class="col-1 d-flex">
<v-container fluid="" class="pa-0">
<v-row
no-gutters
justify="center"
>
<div class="border"></div>
</v-row>
</v-container>
</v-col>
<v-col>
<v-row
no-gutters
class="pb-8"
>
<v-col class="col-11">
<v-card
class="pt-4 pb-1 pr-4 pl-4"
outlined
tile
color="#cfe2f3"
>
<p class="title">自己紹介</p>
<p>
XX_ここに自己紹介文を入力します
</p>
</v-card>
</v-col>
</v-row>
<v-row
no-gutters
class="pb-8"
>
<v-col class="col-11">
<v-card
class="pt-4 pb-1 pr-4 pl-4"
outlined
tile
color="#ead1dc"
>
<p class="title mb-0">興味のある技術</p>
<v-list class="transparent">
<v-list-item class="">
<v-list-item-icon>
<v-icon color="#43a047">mdi-checkbox-marked</v-icon>
</v-list-item-icon>
<v-list-item-content>
XX_ここに興味のある技術を入力します
</v-list-item-content>
</v-list-item>
<v-list-item class="my-n4">
<v-list-item-icon>
<v-icon color="#43a047">mdi-checkbox-marked</v-icon>
</v-list-item-icon>
<v-list-item-content>
XX_ここに興味のある技術を入力します
</v-list-item-content>
</v-list-item>
<v-list-item class="">
<v-list-item-icon>
<v-icon color="#43a047">mdi-checkbox-marked</v-icon>
</v-list-item-icon>
<v-list-item-content>
XX_ここに興味のある技術を入力します
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-col>
</v-row>
<v-row
no-gutters
>
<v-col class="col-11">
<v-card
class="pt-4 pb-1 pr-4 pl-4"
outlined
tile
color="#f5e4bf"
>
<p class="title">好きな言葉</p>
<p>
XX_ここに好きな言葉を入力します
</p>
</v-card>
</v-col>
</v-row>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<style scoped>
#app {
background: #e8e8e8;
}
.border{
background-color: #585858;
width: 1px;
height:80vh;
}
.port-title {
border-left: solid 10px #4a86e8;
border-top: solid 3px #4a86e8;
border-bottom: solid 3px #4a86e8;
border-right: solid 3px #4a86e8;
}
</style>
<script>
// import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
// HelloWorld,
},
data: () => ({
alignments: [
'start',
'center',
'end',
],
}),
};
</script>
上記のソースコードについて少し解説を行います。
.vueファイルは下記の3つのセクションで構成されています。
templateセクションには、ページのメインの要素となるHTMLを記述します。今回はVue.js独自の記法を多用しているため、一見するとHTMLであるとわかりにくくなっていますが、Pタグなどが含まれていることが確認できるかと思います。
styleセクションにはtemplateセクションで定義したHTMLに適用するCSSを記述します。
最後のscriptセクションにはページで動作させたいJavascriptのコードを記述します。今回はベースのテンプレートを最小限に変更した内容となっておりますので、data属性にalignmentsを定義していますが、実際には使用しておりません。本来はdata属性の部分に、templateセクションで使いたい変数を定義する必要があります。
では、一度このタイミングで、一度ブラウザのページを確認しましょう。
下記コマンドを実行してローカルのサーバーを起動させます。
(既に下記コマンドが実行中の場合は、再度実行する必要はありません)
Copied!# ローカルサーバーを起動する
$ yarn serve
「http://localhost:8080/
」にブラウザでアクセスします。
下記画像のようなページが表示されるかと思います。
(アイコン画像は指定した画像が表示されているはずですので、下記画像とは異なります。)
src/App.vue内の下記項目を各自の好きな内容に変更します。
src/App.vueファイルを保存してください。その後、「http://localhost:8080/
」にブラウザでアクセスします。ページの内容が、修正した内容に反映されていることを確認してください。
(ページが変更されない場合は、yarn seve
コマンドが実行中である必要がありますので、実行中であるかをご確認ください)
最後に、修正した内容をGitHubにプッシュします。
「portfolio-deploy-automation」リポジトリ内にいることを確認後、下記コマンドを実行してください。
Copied!$ git add .
$ git commit -m 'ポートフォリオの内容を追加'
$ git push origin master
ウェブブラウザのGitHub内の自分の作成したリポジトリ内に、自分が作成したコードが表示されていることを確認ください。
以上で、コードの修正は完了です。
お疲れさまでした。