particles 粒子背景插件在vue3中的使用

[](https://particles.js.org) # tsParticles - TypeScript Particles **A lightweight TypeScript library for creating particles. Dependency free (\*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components** [](https://github.com/sponsors/matteobruni) [](https://www.jsdelivr.com/package/npm/tsparticles) [](https://cdnjs.com/libraries/tsparticles) [](https://www.npmjs.com/package/tsparticles) [](https://www.npmjs.com/package/tsparticles) [](https://lerna.js.org/) [](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rating-badge&utm_term=js/tsparticles) [](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [](https://repl.it/github/matteobruni/tsparticles) [](https://discord.gg/hACwv45Hme) [](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://chat.whatsapp.com/KQyHc9UEbRc2qlqNQR2J5c) [](https://t.me/tsparticles) [](https://www.reddit.com/r/tsParticles/) [](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") [![Buy Me A Coffee](https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20beer&emoji=���&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00")](https://www.buymeacoffee.com/matteobruni) --- ## Table of Contents - [tsParticles - TypeScript Particles](#tsparticles---typescript-particles) - [Table of Contents](#table-of-contents) - [Do you want to use it on your website?](#do-you-want-to-use-it-on-your-website) - [**_Library installation_**](#library-installation) - [**_Hosting / CDN_**](#hosting--cdn) - [jsDelivr](#jsdelivr) - [cdnjs](#cdnjs) - [unpkg](#unpkg) - [**_npm_**](#npm) - [**_yarn_**](#yarn) - [**_pnpm_**](#pnpm) - [Import and require](#import-and-require) - [**_Usage_**](#usage) - [Official components for some of the most used frameworks](#official-components-for-some-of-the-most-used-frameworks) - [Angular](#angular) - [`ng-particles`](#ng-particles) - [Astro](#astro) - [`astro-particles`](#astro-particles) - [Ember.js](#emberjs) - [`ember-tsparticles`](#ember-tsparticles) - [Inferno](#inferno) - [`inferno-particles`](#inferno-particles) - [jQuery](#jquery) - [`jquery-particles`](#jquery-particles) - [Preact](#preact) - [`preact-particles`](#preact-particles) - [ReactJS](#reactjs) - [`react-particles`](#react-particles) - [RiotJS](#riotjs) - [`riot-particles`](#riot-particles) - [SolidJS](#solidjs) - [`solid-particles`](#solid-particles) - [Svelte](#svelte) - [`svelte-particles`](#svelte-particles) - [VueJS 2.x](#vuejs-2x) - [`vue2-particles`](#vue2-particles) - [VueJS 3.x](#vuejs-3x) - [`vue3-particles`](#vue3-particles) - [Web Components](#web-components) - [`web-particles`](#web-particles) - [WordPress](#wordpress) - [`wordpress-particles`](#wordpress-particles) - [Elementor](#elementor) - [Presets](#presets) - [Big Circles](#big-circles) - [Bubbles](#bubbles) - [Confetti](#confetti) - [Fire](#fire) - [Firefly](#firefly) - [Fireworks](#fireworks) - [Fountain](#fountain) - [Links](#links) - [Sea Anemone](#sea-anemone) - [Snow](#snow) - [Stars](#stars) - [Triangles](#triangles) - [Templates and Resources](#templates-and-resources) - [**_Demo / Generator_**](#demo--generator) - [**_Video Tutorials_**](#video-tutorials) - [Characters as particles](#characters-as-particles) - [Polygon mask](#polygon-mask) - [Animated stars](#animated-stars) - [Nyan cat flying on scrolling stars](#nyan-cat-flying-on-scrolling-stars) - [Snow particles](#snow-particles) - [Background Mask particles](#background-mask-particles) - [**_Options_**](#options) - [Want to see it in action and try it?](#want-to-see-it-in-action-and-try-it) - [Migrating from Particles.js](#migrating-from-particlesjs) - [Plugins/Customizations](#pluginscustomizations) - [Dependency Graph](#dependency-graph) - [Sponsors](#sponsors) - [Huge thanks to JetBrains for the 2020-2022 Open Source Licenses!](#huge-thanks-to-jetbrains-for-the-2020-2022-open-source-licenses) --- ## Do you want to use it on your website? _Documentation and Development references [here](https://particles.js.org/docs/) ���_ **This library is available on two of the most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier**. You'll find the instructions [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation), with all the links you need, and _don't be scared by **TypeScript**, it's just the source language_. **The output files are just JavaScript**. �ㄹ CDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.engine.min.js), and all files splitted for `import` syntax. **If you are interested** there are some _simple instructions_ just [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to migrate from the old particles.js library. ## **_Library installation_** ### **_Hosting / CDN_** **_Please use these hosts or your own to load tsParticles on your projects_** #### jsDelivr [](https://www.jsdelivr.com/package/npm/tsparticles-confetti) [](https://www.jsdelivr.com/package/npm/tsparticles-engine) [](https://www.jsdelivr.com/package/npm/tsparticles-fireworks) [](https://www.jsdelivr.com/package/npm/tsparticles-basic) [](https://www.jsdelivr.