分步指南
欢迎来到 tsParticles 指南部分。无论你是在构建静态的 Vanilla JS 站点、React 或 Vue 的单页应用,还是使用 Next.js 或 Nuxt 的全栈应用,这些分步教程将引导你完成安装、基本使用、高级配置和交互效果。
每个指南都是独立的,包含可直接复制粘贴的代码示例,让你快速上手。
可用指南
| 框架 / 封装 | 包 | 描述 |
|---|---|---|
| Vanilla JS | tsparticles(CDN 或 npm) | 使用 tsParticles.load() 进行直接 DOM 集成 |
| React | @tsparticles/react | 官方 React 封装,提供 Hooks 和组件 API |
| Vue 3 | @tsparticles/vue3 | 官方 Vue 3 插件,提供组合式 API |
| Angular | @tsparticles/angular | 官方 Angular 组件和模块 |
| Svelte | @tsparticles/svelte | 官方 Svelte 组件 |
| Next.js | @tsparticles/react(配合 Next.js) | 服务端渲染和动态导入 |
| Nuxt | @tsparticles/vue3(配合 Nuxt) | 以 Nuxt 插件形式实现的 SSR 安全集成 |
| Solid | @tsparticles/solid | 官方 SolidJS 封装 |
| Preact | @tsparticles/preact | Preact 兼容组件 |
| Lit | @tsparticles/lit | Lit Web 组件封装 |
| Qwik | @tsparticles/qwik | Qwik 优化集成 |
| jQuery | @tsparticles/jquery | 用于遗留项目的 jQuery 插件 |
| Astro | @tsparticles/react(或任意封装) | 支持 Island 架构和客户端指令 |
| Web Components | @tsparticles/webcomponents | 自定义元素 API 集成 |
| Stencil | @tsparticles/stencil | Stencil 组件封装 |
| Ember | @tsparticles/ember | Ember 插件集成 |
| Riot | @tsparticles/riot | Riot.js 封装 |
| Inferno | @tsparticles/inferno | Inferno 兼容组件 |
| WordPress | 插件 + tsparticles | 块编辑器 / 短代码集成 |
选择你的指南
- Vanilla JS(纯 JavaScript)
- React
- Vue 3
- Angular
- Svelte
- Next.js
- Nuxt
- Solid
- Preact
- Lit
- Qwik
- jQuery
- Astro
- Web Components
- Stencil
- Ember
- Riot
- Inferno
- WordPress
祝构建愉快!
