More than 5 years have passed since last update.

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

Last updated at 2018-12-15Posted at 2018-12-15

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

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

Vue.jsをちょっと使って、ポートフォリオサイトつくりました！

クオリティ低いけど、みてくださーいhttps://t.co/56qqP0RozR
— じぇい👨‍💻 (@jyouj__) December 15, 2018

なんで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>

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

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

レスポンシブ対応されたカルーセルを使えるライブラリです。これも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]]>

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

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

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

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

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

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