vue引入particlesJS，实现粒子效果

步骤1：安装 vue-particles

首先，你需要在你的 Vue 项目中安装 vue-particles。可以使用 npm 或 yarn 来安装它。在终端中运行以下命令之一：

使用 npm：

npm install vue-particles

使用 yarn：

yarn add vue-particles

步骤2：引入和注册 vue-particles 组件

在你想要使用 vue-particles 的组件中，需要引入并注册 vue-particles 组件。在你的 Vue 单文件组件或全局注册的组件中，加入以下代码：

import VueParticles from 'vue-particles'
Vue.use(VueParticles)

步骤3：在模板中使用 <vue-particles> 元素，并配置相应属性

<template>
    <div>
<vue-particles 
color="#409EFF" /* 设置粒子颜色 */ 
:particleOpacity="0.7" /* 设置粒子透明度 */ 
:particlesNumber="80" /* 设置粒子数量 */ 
shapeType="circle" /* 设置粒子形状为圆形 */ 
:particleSize="4" /* 设置粒子大小 */ 
linesColor="#409EFF" /* 设置线条颜色 */ 
:linesWidth="1" /* 设置线条宽度 */ 
:lineLinked="true" /* 设置粒子之间是否连接 */ 
:lineOpacity="0.4" /* 设置线条的透明度 */ 
:linesDistance="150" /* 设置粒子之间连接的距离 */ 
:moveSpeed="3" /* 设置粒子移动速度 */ 
:hoverEffect="true" /* 设置是否开启鼠标悬停效果 */ 
hoverMode="grab" /* 设置鼠标悬停时的效果模式 */ 
:clickEffect="true" /* 设置是否开启点击效果 */ 
clickMode="push" /* 设置点击时的效果模式 */ >
</vue-particles>
<div id="wrapper">
<div>
                <img src="@/assets/img/logo.png" />
                <h2>与世界分享你的知识、经验和见解</h2>
            </div>
            <nav class="switch_nav">
                <a href="register" id="switch_signup" class="switch_btn">注册</a>
                <a href="javascript:;" id="switch_login" class="switch_btn on">登陆</a>
                <div class="switch_bottom" id="switch_bottom"></div>
            </nav>
</div>
<div>