一、引言
当我们在开发一个系统时,尤其是后台管理系统的开发中,网站的登录页背景效果如果足够简约并且具有炫酷属性的话,那对系统的整体期待值会比较高。而Particles粒子效果就是其中一种,目前多与Vue3的项目相结合。
二、Particles粒子库的安装与使用
库名:@tsparticles/vue3(npm库中的地址)
1. 安装
目前npm安装推荐使用
npm i @tsparticles/vue3
使用yard的话官网推荐命令yarn add @tsparticles/vue3
2. 引入vue3的项目
-
以下是作者推荐的导入方式,在主文件main.js中
- 还需要安装加载loadSlim的库,
npm i @tsparticles/slim
为啥不安装tsparticles-slim,具体原因我第三部分会讲 - 下面的use注册内容,原封不动复制粘贴过去即可
import Particles from "@tsparticles/vue3"; //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too. createApp(App).use(Particles, { init: async engine => { // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations }, });
- 还需要安装加载loadSlim的库,
-
将粒子标签及属性内容导入到对应登录页面(复制粘贴即可,第一个vue-particles可不要)
<template> <div id="app"> <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" /> <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" :options="{ background: { color: { value: '#0d47a1' } }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' }, }, modes: { bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40 }, push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: '#ffffff' }, links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.5, width: 1 }, move: { direction: 'none', enable: true, outModes: 'bounce', random: false, speed: 6, straight: false }, number: { density: { enable: true, }, value: 80 }, opacity: { value: 0.5 }, shape: { type: 'circle' }, size: { value: { min: 1, max: 5 } } }, detectRetina: true }" /> </div> </template> <script setup> const particlesLoaded = async container => { console.log("Particles container loaded", container); } </script>
三、安装中存在的问题及解决方法
如果默认按照npm i tsparticles-slim
安装loadSlim并引入
- 则会报如下错误,并且页面是一片”这个叫啥色儿来着“!
main.js:13 tsParticles - Error in animation loop TypeError: Cannot read properties of undefined (reading 'circleRange')
查了github上的相关内容,给出解决方法(参考地址)
因为tsparticles-slim已经不兼容Vue3,所以所有的tsparticles包都不会生效,目前已经使用
@tsparticles/slim
包代替
- 重新卸载了
npm uninstall tsparticles-slim
- 并安装
npm i @tsparticles/slim
效果出来了,完美解决!!!