Edited at

CDN版Vue.jsでポートフォリオをサクッと作ったよ!

じぇいです。こんにちは。

Vueを使って、ポートフォリオをトータル4時間で作りました!使った技術などを共有しようと思います。


なんでVueを使ったの?

最初はだらだらとCSSやJavaScriptで書いていたのですが、コンポーネントを使わないとめんどくさいと思ったので、Vue.jsを使おうと思った次第です。

基本的にVue.jsの便利なところをちょこっと使いたかっただけなので、CDN版のVue.jsを選択しました。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

すぐに始められていいですよね!


使ったもの


Vue.js

コンポーネントとか他にも様々な便利機能をサクッと使えちゃうJavaScriptのフレームワークです。


Vue Carousel

レスポンシブ対応されたカルーセルを使えるライブラリです。これもCDNを使ってサクッと始められます。

<script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>

var app = new Vue({

el: '#app',
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
}
})

これをAboutページに使いました!

<carousel v-bind:autoplay="true" v-bind:per-page-custom=[[200,1],[480,3],[780,4]]>

自動で遷移するようにも設定できます。また、デバイスの大きさで表示するコンテンツ数も設定できてすごく楽ですね!スライドするコンテンツをコンポーネント化するとものすごく便利ですよ!


Bulma

レスポンシブ対応ラクラクなので、重宝してます。


iTyped.js

タイピング風のアニメーションが実装できるライブラリです。これもCDN版でサクッと始められます。

<script src="https://unpkg.com/ityped@1.0.2"></script>

解説記事は自分のブログに書いてます(笑)

[JavaScript]iTyped.jsでタイピングアニメーションをサクッとつくる


Github Pages

無料で簡単にホスティングできるので、助かる!


最後に

CSSが多分一番疲れる。あと、やっぱりVue.jsは楽しいってことを再認識しました。もっとWebサービスを作ってWork欄を充実させたい(笑)