Skip to content

模板和资源

tsParticles 提供两类模板:脚手架模板(框架骨架)和用例模板(完整示例应用)。

通过 CLI 快速开始

使用模板最简单的方式是通过 CLI:

bash
npm create tsparticles@latest

或者直接使用特定的包:

bash
npm create particles@latest
npm create confetti@latest
npm create ribbons@latest

非交互式用法:

bash
npx tsparticles-create app my-project --template scaffold --framework react
npx tsparticles-create app my-project --template confetti --framework vanilla

脚手架模板

脚手架模板提供了一个最小的 Vite + TypeScript 项目骨架,并预配置了 tsParticles。以下框架可用:

框架CLI 选项
Vanilla--framework vanilla@tsparticles/template-scaffold
React--framework react@tsparticles/template-scaffold
Vue 3--framework vue3@tsparticles/template-scaffold
Angular--framework angular@tsparticles/template-scaffold
Svelte--framework svelte@tsparticles/template-scaffold
Solid--framework solid@tsparticles/template-scaffold

示例:

bash
npx tsparticles-create app my-react-app --template scaffold --framework react
cd my-react-app
npm install
npm run dev

用例模板

用例模板是完整的示例应用,展示了 tsParticles 的实际应用场景。

模板描述CLI 模板名称
Login带粒子背景的登录/注册页面login@tsparticles/template-login
Portfolio带动画英雄区的个人作品集portfolio@tsparticles/template-portfolio
Landing带冲击力粒子的营销着陆页landing@tsparticles/template-landing
Tic Tac Toe带五彩纸屑庆祝的井字游戏tictactoe@tsparticles/template-tictactoe
Confetti五彩纸屑大炮演示confetti@tsparticles/template-confetti
Ribbons丝带动画演示ribbons@tsparticles/template-ribbons
Particles经典的 particles.js 风格演示particles@tsparticles/template-particles

示例:

bash
npx tsparticles-create app my-portfolio --template portfolio --framework vanilla
cd my-portfolio
npm install
npm run dev

npm create 包装器

对于特定包的模板,您可以使用专用的 npm create 包装器:

命令模板框架安装的包
npm create tsparticles@latest交互式交互式用户选择
npm create particles@latestparticlesVanilla@tsparticles/particles
npm create confetti@latestconfettiVanilla@tsparticles/confetti
npm create ribbons@latestribbonsVanilla@tsparticles/ribbons

CLI 参考

bash
tsparticles-create app [destination] [options]

Options:
  --template <name>     Template to use (scaffold|login|portfolio|landing|tictactoe|confetti|ribbons|particles)
  --framework <name>    Framework (vanilla|react|vue3|angular|svelte|solid)
  --skip-install        Skip npm install after scaffolding
  -h, --help            Display help

相关页面