首页 > 其他分享 >在vue3中使用粒子库particles.vue3,只有背景没有粒子的问题

在vue3中使用粒子库particles.vue3,只有背景没有粒子的问题

时间:2023-10-10 15:34:24浏览次数:30  
标签:Particles loadFull 粒子 particlesInit particles vue3

按下述步骤,看是缺少安装包还是缺少引入方法
(题主一开始不能显示粒子的原因是因为没有进行下述红色代码的操作)

1. 要安装两个包

npm install particles.vue3
npm install tsparticles

2. 可选择全局引入main.js

// 导入粒子库
import Particles from "particles.vue3";
// use 注册
createApp(App)
  .use(Particles)
  .mount("#app");

3. 在使用粒子库的页面,例如Login.vue

<template>
  <div>
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="
.....粒子的样式,不重要
         " /> </div> </template> <script setup> // 导入粒子库loadFull方法 import { loadFull } from "tsparticles"; // 初始化粒子库 const particlesInit = async (engine) => { await loadFull(engine); }; </script>

4. 问题解决

 

标签:Particles,loadFull,粒子,particlesInit,particles,vue3
From: https://www.cnblogs.com/gamepen/p/17754802.html

相关文章

  • P4345 超能粒子炮·改
    洛谷题面传送门description求\(\sum\limits_{i=0}^k\dbinom{n}{i}\bmod2333\)2333是质数。\(10^5\)测,\(n,k\leq10^{18}\)。solution由Lucas定理,\(\dbinom{n}{m}\equiv\dbinom{n\bmodp}{m\bmodp}\dbinom{\lfloorn/p\rfloor}{\lfloorm/p\rfloor}\p......
  • vue3+ts中使用echarts
    1. 下载npminstall-Secharts2.使用方法一(推荐使用)<divclass="echart_box"ref="echartDom"></div><scriptsetuplang="ts">import*asechartsfrom"echarts";constechartDom=ref()//使用ref创建虚拟DOM引......
  • vue3子组件页面不更新
    写在前面这是一次滑铁卢,整整找了半天时间...项目结构我有一个组件A,A中定义了一个属性data:Object,A中将data赋值给了一个reactive类型的对象R。页面中均使用R。现象描述当调用A的父组件P更新了A的data后,A的页面不更新问题分析P更新A后,A是一个新的对象,但R仍然引用旧对象,导致产......
  • vue3绘制和回显多边形
    参考了这个:https://blog.csdn.net/weixin_42178050/article/details/130012696将其从vue2的语法改成了vue3,效果如下:代码如下:<template><divclass="app-container"><divclass="d-flexj-center"><el-container><el......
  • vue3 watchEffect 的用法
    watchEffect 是Vue3中用于监听响应式数据变化并执行副作用函数的函数。它的使用方式和作用如下:基本用法:javascript插入代码复制代码import{ref,watchEffect}from'vue';constmyData=ref(0);watchEffect(()=>{console.log('myDatahaschanged:',myData.......
  • vue3
    vue3介绍vue3完全兼容vue2#tree-shaking是一种消除死代码的性能优化理论#TypeScript -javascript:坑---》填坑---》弱类型-typeScript:强类型语言 组合式api和配置项apivue3兼容vue2---》vue2的内容,vue3完全适用vue3不建议这么用了,建议使用组合式api,不建议使用配置......
  • vue3比vue2优势
    Vue3相对于Vue2有一些显著的优势,主要集中在性能、开发体验和一些新的特性上:性能提升:虚拟DOM的优化:Vue3使用了更高效的虚拟DOM算法,减少了不必要的DOM操作,提高了渲染性能。编译器优化:Vue3的编译器生成的代码更为紧凑和高效,加速了首次渲染和更新速度。更小的包大小:Vu......
  • vue3 新增 mitt 的使用
    在Vue3中,你可以使用 mitt 库来实现事件总线,以便在组件之间进行通信。下面是详细的介绍如何使用 mitt:安装 mitt 库: 首先,确保你已经安装了 mitt 库。你可以使用npm或yarn来安装它:插入代码复制代码npminstallmitt或插入代码复制代码yarnaddmitt......
  • 创建vue3项目、setup函数、ref函数、reactive函数、计算监听属性、生命周期、torefs、
    创建vue3项目#两种方式-vue-cli:vue脚手架---》创建vue项目---》构建vue项目--》工具链跟之前一样-vite:https://cn.vitejs.dev/-npmcreatevue@latest一路选择即可#运行vue3项目-vue-cli跟之前一样-vi......
  • vue3中defineComponent 的作用详解
    转自:https://www.jb51.net/article/263096.htm 这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 vue3中,新增了defineComponent,它并没有实现任何的逻辑,只是把接收的......