vue项目中使用 vue-particles 制造粒子效果背景

风哑

已于 2023-08-19 11:16:34 修改

阅读量1.4k

点赞数

分类专栏：前端_Vue 文章标签：制造

于 2022-09-25 17:25:01 首次发布

本文链接：https://blog.csdn.net/A_Common_Man/article/details/127039869

版权

前端_Vue 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

先看背景效果：

注：粒子的大小，颜色，和运动速度都可以自定义。背景图片是我自己找的，可根据需要替换成自己的。

背景图片：

再说过程：

第一步：下载插件

yarn add vue-particles //或者用npm i 去下

第二步：main.js 中导入并全局使用


// vue2：
import Vue from 'vue';
// 背景粒子特效
import VueParticles from 'vue-particles';
Vue.use(VueParticles);


// vue3:
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 背景粒子特效
import VueParticles from 'vue-particles';
app.use(VueParticles).mount('#app');

第三步：.vue文件中使用组件

以下仅为参考：

     <!-- 使用vue插件制造背景效果 -->
        <vue-particles
            color="#00aeff"
            :particleOpacity="0.7"
            :particleOpacityRandom="true"
            :particlesNumber="140"
            shapeType="circle"
            :particleSize="4"
            linesColor="#8EB5C9"
            :linesWidth="1"
            :lineLinked="false"
            :lineOpacity="0.6"
            :linesDistance="120"
            :moveSpeed="1"
            :hoverEffect="false"
            hoverMode="grab"
            :clickEffect="false"
            clickMode="push"
        >
        </vue-particles>

tip：组件<vue-particles>最好靠前放