preface

I saw the particle effect in the background page on the blog forum before and felt quite novel, so I went to the Internet to find a demo, and found that the particle background effect was basically realized by VUE + JS. However, AFTER some searching, I found that TSParticles was suitable for TS to realize the particle background. And also gives the related demo in the making, link is as follows: codesandbox. IO/s/particles…

So I revamped my code as well

To prepare

Install TSPArticles and Particles. Vue3

yarn add particles.vue3 tsparticles -D
Copy the code

Code transformation

At this point we just need to modify the following file and get the desired particle background

index.html

 <style>
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        html {
            height: 100%;
        }
        #app {
            height: 100%;
        }
    </style>
<body>
    <div id="app"></div>
</body>
Copy the code

index.ts

Import {createApp} from 'vue' // vue 3.x Import router from './router/index' import store from './store/index' import App from './ app.vue '// import './index. SCSS' import './index.less' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import Particles from "particles.vue3"; Const app = createApp(app) // Initialize app with createApp App.use (router).use(store).use(Particles).use(ElementPlus).mount('#app') // Mount the page to root nodeCopy the code

“Particles. Vue3” will not be found. If it already exists, please declare

We need to declare particles. Vue3 in shims-vue.d.ts

declare module '*.vue' {
  import type { DefineComponent } from 'vue'

  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module "particles.vue3";
Copy the code

APP.vue

<template> <div style="height: 100%;" > <router-view></router-view> <Particles id="tsparticles" :options="{ background: { color: { value: '#0d47a1' } }, fpsLimit: 60, interactivity: { detectsOn: 'window', events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' }, resize: true }, modes: { bubble: { distance: 400, duration: Opacity: 0.8, size: 40, speed: 3}, push: {quantity: 4}, repulse: {distance: 200, duration: 0.4}}}, Particles: Opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity: opacity 1 }, collisions: { enable: true }, move: { direction: 'none', enable: true, outMode: 'bounce', random: false, speed: 6, straight: false }, number: { density: { enable: true, value_area: 800 }, value: 80 }, opacity: { value: 0.5}, Shape: {type: 'circle'}, size: {random: true, value: 5}}, detectRetina: true }" /> </div> </template> <script lang="ts"> import { ref } from "vue"; export default { setup() { } }; </script> <style scoped> img { width: 200px; } h1 { font-family: Arial, Helvetica, sans-serif; } #app { height: 100%; } #tsparticles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000; z-index: -10; } </style>Copy the code

The login page looks like this