---

前言

學習一個有趣炫酷的玩意開心一下。

tsparticles，可以方便的實現各種粒子特效。支持的語言框架也是相當的豐富.

官網：https://particles.js.org/

---

一、vue3使用tsparticles

先來個vue3使用的入門案例：

pnpm install @tsparticles/vue3

然后按照官方文檔：

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 itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations},
});

本以為可以了，但是看了一眼注釋，還需要安裝一下slim：

pnpm install @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.const app = createApp(App)//創建pinia
const pinia = createPinia()registerPlugins(app)//使用路由器
app.use(router)
//使用pinia
app.use(pinia)//使用Particles
app.use(Particles, {init: async engine => {// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need itawait loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations},})

二、使用步驟

創建頁面mouseattraction.vue：

代碼如下（示例）：

<template><div id="app"><vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" /><vue-particlesid="tsparticles"@particles-loaded="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 lang="ts" name="">
const particlesLoaded = async (container: any) => {console.log("Particles container loaded", container);
};
</script><style lang='scss' scoped>
</style>

路由代碼如下（示例）：

    {path:'/tsParticles/mouseattraction',component:Mouseattraction}

運行效果：

---

總結

只是按照官網的示例運行成功了，還有很多很多其他炫酷的示例沒有測試，后續還會繼續研究一番。

不要因為結束而哭泣，微笑吧，為你的曾經擁有。