Vue Particlesでイケてるサイトをサクっと作る

こんにちは。
自分はVue大好きで、最近よく[Vue.js Showcase - Made With Vue.js](https://madewithvuejs.com/)を見ています（Vueに関連したサイトなどが載ってて楽しいのでVue好きは是非覗いてみてください）。そこで先日、[Vue Particles - Made with Vue.js](https://madewithvuejs.com/vue-particles)を見つけてしまったのです。
もうやばいです。かっこいいです。
![vue-particles.png](https://qiita-image-store.s3.amazonaws.com/0/18699/c60652c8-7412-7825-cc78-5a9a8e53d39a.png)
これ、作りましょう。

## デモ
先にデモをお見せしておきます。
http://taishikato-try-vue-particles.surge.sh/
ちなみに今回はホスティングに[Surge](https://surge.sh/)を使いました。
### Githubリポジトリ
[taishikato/try-vue-particles](https://github.com/taishikato/try-vue-particles)
## Tools
今回使用するツールはこちらです。

* vue-cli
* yarn

## How to use
### プロジェクトフォルダ作成

```sh
$ vue init webpack try-vue-particles
```
上記コマンドを実行すると`yarn`コマンド実行まで行えるはずです。
それで必要なnode moduleがインストールされます。

### それっぽい画像をゲットする
[Free stock photos · Pexels](https://www.pexels.com/)にアクセスして、`universe`で検索しましょう。Particleなオブジェクトと相性のいい、壮大な宇宙を想像させるハイクオリティな画像がたくさん出てきます。
良さげな写真を選んで`bgimage.jpeg`として`src/assets/image/`配下に保存しましょう。

### Bulmaを使う
正直今回は[Bulma](https://bulma.io/)を使うまでもないんですけど、好きなので使います。

```sh
$ yarn add bulma --dev
```

`src/assets/sass/main.scss`を作成し、以下を記述します。

```scss

@import '~bulma/bulma'
```

`src/main.js`に`require('./assets/sass/main.scss')`を追記

```javascript

import Vue from 'vue'
import App from './App'
import VueParticles from 'vue-particles'

Vue.config.productionTip = false

+ require('./assets/sass/main.scss')
Vue.use(VueParticles)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
```

`node-sass`、`sass-loader`をインストールします。

```sh
$ yarn add node-sass sass-loader --dev
```

### コーディング
今回いじるのは`src/App.vue`のみです。

```html

<template>
  <div id="app">
    <div id="main" class="has-text-centered">
      <h1 class="title is-1">VUE PARTICLES IS ASESOME</h1>
      <a href="https://bulma.io" target="_blank">
        <img src="https://bulma.io/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
      </a>
    </div>
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html, body, #app {
    height: 100%;
}

#app {
  position: relative;
  background-image: url('./assets/image/bgimage.jpeg');
  background-size: cover;
}

#main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

h1 {
  color: #ffffff !important;
  text-shadow: 5px 5px 0px #000000;
  font-family: 'Dosis', sans-serif;
}
</style>
```

ここで大事なのは、↓です。
`<vue-particles>`が、いけてるParticleを生成・表示するコンポーネントです。

```html
<vue-particles
  color="#dedede"
  :particleOpacity="0.7"
  :particlesNumber="80"
  shapeType="circle"
  :particleSize="4"
  linesColor="#dedede"
  :linesWidth="1"
  :lineLinked="true"
  :lineOpacity="0.4"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
>
</vue-particles>
```

### サーバー起動

```sh
$ yarn dev
```

http://localhost:8080/ をブラウザで確認してみましょう。
UniversalでParticleなイケてるサイトが目の前に現れるはずです。
![vue-particles-cap.png](https://qiita-image-store.s3.amazonaws.com/0/18699/dce59983-3f1d-9896-0e07-7392ed8ce2ed.png)
> VUE PARTICLES IS ASESOME

ありがとうございました。

💡3/30 追記

VUE PARTICLESを使って、これから作ろうと思ってるサイトのComing Soon的なページも作ってみました。
http://movieing-astronaut-coming-soon.surge.sh/
[taishikato/movieing-astronaut-coming-soon-page - GitHub](https://github.com/taishikato/movieing-astronaut-coming-soon-page)

今回はちょっと画像の綺麗さにもこだわって、でもサイトローディングの速度は落としたくなく、[Cloudinary](https://cloudinary.com/)を使って実装しました。