目次
vue-particles-useとは
vue-particles-useは、パーティクルを実装できるコンポーネントライブラリです。
【動画サイズ:900KB】
環境
Vue | 2.6.10 |
vue-particles-use | 1.0.1 |
インストール
以下のnpm、CDNを使ってインストールします。
npm
npm install vue-particles-use --save
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-particles-use.umd.min.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/selecli/vue-particles-use
導入手順
1. ライブラリの取り込み
(1)ES6等の場合 [注意]モジュール版は未検証です。
import VueParticlesUse from 'vue-particles-use'
(2)CDNの場合
const VueParticlesUse = window['vue-particles-use'].default;
2.メソッドを設定
上記で取得したVueParticlesUseを Vue.use
に取り込みます。
Vue.use(VueParticlesUse) new Vue({ el: '#app' });
3. テンプレートを準備
<vue-particles-use>
を設置する。
[注意] サンプルはケバブケースで記載しています。
<div id="app"> <vue-particles-use :number="30" :area="2000" color="#ff0000" shape="star" :lineWidth="5" lineColor="#ff0000" :opacity="0.5" :speed="20" hoverMode="grab" clickMode="bubble" > </vue-particles-use> </div>
サンプル
さいごに
パーティクルを実装できるコンポーネントライブラリでした。
今日はこの辺でー