Vue Particles에서 멋있는 사이트를 바삭하게 만드는

안녕하세요.
자신은 Vue 사랑하고, 최근 잘 Vue.js Showcase - Made With Vue.js (을)를 보고 있습니다 (Vue 에 관련한 사이트등이 실려 있어 즐겁기 때문에 Vue 좋아하는 것은 꼭 들여다 봐 주세요). 그래서 요전날, Vue Particles - Made with Vue.js 를 찾아 버렸습니다.
이미 괜찮습니다. 멋지다.

이것, 만들자.

데모

먼저 데모를 보여 드리겠습니다.
h tp : // 타이시와 트리 ゔ 에 빠 r 치 ぇ s. 미끄럼. sh/
그건 그렇고, 이번에는 호스팅에 서지을 사용했습니다.

Github 저장소

타이시 카토 / 트리

도구

이번에 사용하는 도구는 여기입니다.

vue-cli

yarn

How to use

프로젝트 폴더 만들기

$ vue init webpack try-vue-particles

위 명령을 실행하면 yarn 명령 실행까지 할 수 있어야 합니다.
그러면 필요한 노드 모듈이 설치됩니다.

그런 이미지를 얻기

Free stock photos · Pexels로 이동하여 universe에서 검색하세요. Particle인 물체와 궁합이 좋은, 장대한 우주를 상상시키는 고품질의 이미지가 많이 나옵니다.
좋은 사진을 선택하고 bgimage.jpeg 으로 src/assets/image/ 아래에 저장하십시오.

Bulma 사용

솔직히 이번은 Bulma 을 사용할 때까지도 없지만, 좋아해서 사용합니다.

$ yarn add bulma --dev

src/assets/sass/main.scss 를 작성해, 이하를 기술합니다.

@import '~bulma/bulma'

src/main.js 에 require('./assets/sass/main.scss') 추가

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 를 설치합니다.

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

코딩

이번 만지는 것은 src/App.vue 뿐입니다.

<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을 생성·표시하는 컴퍼넌트입니다.

<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>

서버 시작

$ yarn dev

브라우저에서 http://localhost-8080.com/를 확인해 봅시다.
Universal에서 Particle인 멋있는 사이트가 눈앞에 나타날 것입니다.


VUE PARTICLES IS ASESOME

고마워요.

💡3/30 추가

VUE PARTICLES를 사용하여 앞으로 만들려고 하고 있는 사이트의 Coming Soon적인 페이지도 만들어 보았습니다.
ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ 미끄럼. sh/
taishikato/movieing-astronaut-coming-soon-page - GitHub

이번은 조금 이미지의 깨끗함을 고집해, 하지만 사이트 로딩의 속도는 떨어뜨리고 싶지 않고, Cloudinary 를 사용해 실장했습니다.