Vue.jsのコンポーネントライブラリーを使ってみる

はじめに

今までjQueryライブラリーを使って実装していたところをvue.jsで実装するときってどうすればいいの？
っていうのをまとめて見ました！
本来なら自分で全部実装しちゃった方が自由度が高く、細かい調整がしやすいのですが、今回は素敵なコンポーネントライブラリーの力を借りて実装する方法に限定して紹介したいと思います。

スティッキーヘッダー

vue-sticky-position

npm
DEMO

Terminal

npm install vue-sticky-position

index.vue

<template>
  <sticky-bar :top=0></sticky-bar>
</template>

<script>
import StickyBar from './ComponentStickyBar.vue'

export default {
  components: {
    StickyBar,
  }
}
</script>

ComponentStickyBar.vue

<template>
  <sticky :top="top">
      <div class="stickyBnr">Sticky Element</div>
  </sticky>
</template>

<script>
import Sticky from 'vue-sticky-position'

export default {
  props: ['top'],
  components: {
    Sticky
  }
}
</script>

カルーセル

vue-l-carousel

npm
DEMO

Terminal

npm install vue-sticky-position

index.vue

<template>
  <img-slider :slide="carouselData" :interval="5000" :dots="false" :btn="true"></img-slider>
</template>
<script>
import ImgCarousel from './ComponentImgCarousel.vue'

export default {
    components: {
        ImgCarousel
    },
    data () {
        return {
            carouselData: [
                {
                  text: 'test1',
                  coler: '#D496A7'
                },
                {
                  text: 'test2',
                  coler: '#78E0DC'
                },
                {
                  text: 'test3',
                  coler: '#9D695A'
                }
            ]
        }
    }
}
</script>

ComponentImgCarousel.vue

<template>
  <carousel :auto="interval" :watch-items="slide" :loop="true" :dots="dots">
      <carousel-item v-for="(item, index) in slide" :key="index">
          <a :href="item.itemLink" target="_blank">
            <img :src="item.itemImg" :alt="item.alt">
          </a>
      </carousel-item>
  </carousel>
</template>

<script>
  import { Carousel, CarouselItem } from 'vue-l-carousel'

  export default {
    props: ['slide', 'interval', 'dots'],
    components: {
      'carousel': Carousel,
      'carousel-item': CarouselItem
    }
  }
</script>

カラーピッカー

vue-color

github
DEMO

Terminal

npm install vue-color

index.vue

<template>
  <loading-spinner></loading-spinner>
</template>

<script>
import ColorPicker from './ComponentColorPicker.vue'

export default {
  components: {
    ColorPicker,
  }
}
</script>

ComponentColorPicker.vue

<template>
  <div>
    <photoshop-picker v-model="colors"></photoshop-picker>
  </div>
</template>

<script>
import { Photoshop } from 'vue-color'

var defaultProps = {
  hex: '#194d33',
  hsl: {
    h: 150,
    s: 0.5,
    l: 0.2,
    a: 1
  },
  hsv: {
    h: 150,
    s: 0.66,
    v: 0.30,
    a: 1
  },
  rgba: {
    r: 25,
    g: 77,
    b: 51,
    a: 1
  },
  a: 1
}

export default {
  components: {
    'photoshop-picker': Photoshop
  },
  data () {
    return {
      colors: defaultProps
    }
  }
}
</script>

ローディング

vue-loading-spinner

github
DEMO

Terminal

npm install vue-loading-spinner

index.vue

<template>
  <loading-spinner></loading-spinner>
</template>

<script>
import LoadingSpinner from './ComponentLoadingSpinner.vue'

export default {
  components: {
    LoadingSpinner,
  }
}
</script>

ComponentLoadingSpinner.vue

<template>
  <div class="loadongArea">
    <rotate-square2></rotate-square2>
  </div>
</template>

<script>
  import {RotateSquare2} from 'vue-loading-spinner'

  export default {
    components: {
      RotateSquare2
    }
  }
</script>

　最後に

Mac環境での確認しかしていないのでIEやEdgeで動くかはわかんないです。
普段はElementっていうUIライブラリを導入し、足りないところはなんとか自力で実装って形を取っていたので結構苦戦しました。
(なぜか動かなかったり、バージョンが異なっていたり...)

動きに限定してコンポーネントを導入するか、全体を統一するためUIライブラリを入れるかはプロジェクトの規模にもよるかと思うのでお好きな方を使えばいいのかなと。

コンポーネントは主にこちらの最新の無料Vue.jsコンポーネントをまとめてくれているVue.js Scriptというサイトで探しています。

本当はもっと多くのご紹介をしたかったのですが、時間がなく、紹介コンポーネントが少なくなってしまったので、少しずつこちらのページを更新したいなと考えています。

※今回DEMOにcodesandboxを使用したのですが、こちらのソースコードを編集権限なしで共有することってできないのでしょうか...。
もしできるようであればこちらに貼り付けたいと思います。