Vue.jsでポートフォリオを作ってgithubにアップロードしてみる

折角Vue.jsを知ったので、勉強だけで終わらずにSPAで何か作ってみたい!!

こちらの学生の方に触発され、私もポートフォリオ(もどき)を作ってみました。

フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話

コンポーネントだけでは面白くないので、vue-routerを活用してみます。

vue-cliで環境構築

vue-cliが最も簡単でスタンダードらしいので利用します。

dev環境で開発しながら動作確認するためには以下コマンドを実行。

デフォルト設定であればlocalhost:8080でアクセス可能。

vue-routerでSPA化

vue-routerを用いたSPAを実装します。

src配下にpagesディレクトリを作成し、以下コンポーネントを作成。

・Home.vue

・Prof.vue

・Skill.vue

・Development.vue

サンプルとしてHome.vueのみコードのみ掲載。

作成したコンポーネントを呼び出すため、router/index.jsを修正。

次にcomponentsディレクトリ配下にmyHeader.vue作成。

最後に作成したmyHeader.vueをApp.vueで呼び出します。

vueトランジション

トップ画面の初期表示時、フェードインさせるためにトランジションを活用。

ビルド設定

build時のオプションを以下のように修正。

ポイントはassetsPublicPathのプロジェクト名指定。

デフォルトでは/となっており、ググってみると空文字指定する方法が見受けられます。

大抵はこの方法で上手くいくようですが、インライン化されない大きな画像に限ってはパスがおかしくなるので、プロジェクト名を指定しています。

以下記事が参考になります。

vue-cli で作ったプロジェクトを github pages 用にするときの注意点

Github Pagesに展開

GitHub Pagesは静的サイトを簡単に作れます。

ユーザーサイトとプロジェクトサイトの2種類がありますが、今回はプロジェクトサイトで!!

以下コマンドでビルドし、gh-pagesのブランチを作成してpushすれば完了。

https://username.github.io/repository/でアクセス可能。

Vue.jsのポートフォリオサイト

github

お金をかけずにgithubだけで完結出来るので助かります。