【新春创造营】+ 福满人间 - 春节祝福语生成器

10012591316 · 2026 年2 月 6 日 13:17

一键生成个性化春节祝福语，让每一份祝福都独一无二

项目简单介绍

"福满人间"是一款轻量级、高颜值、易传播的春节祝福语生成与分享工具。用户可以通过简单的操作，一键生成个性化的春节祝福语，支持复制、分享、保存等功能，提升节日仪式感。

项目定位

轻量级：基于Vue 3 + Vite构建，快速加载，性能优异
高颜值：采用春节主题设计，红色渐变背景，视觉冲击力强
易传播：支持一键复制、分享，方便在社交媒体传播

目标用户

需要发送春节祝福的普通用户
社交媒体运营者
企业HR发送员工祝福
营销人员客户关怀

核心价值

一键生成个性化祝福语
支持多种祝福类型（家人、朋友、商务、情人等）
自定义称呼和关键词
支持复制、分享、保存功能
提升节日仪式感

技术栈

模块	技术选型	说明
前端框架	Vue 3 + Vite	轻量快速，适合静态部署
UI组件库	Element Plus	提供现成组件，加速开发
状态管理	Pinia	如需复杂状态管理
样式方案	Tailwind CSS + SCSS	快速构建响应式布局
图标库	Element Plus Icons	内置丰富的图标
部署平台	Gitee Pages	免费静态托管，国内访问快

功能特性

1. 祝福语生成

6种祝福类型：普通、家人、商务、情人、朋友、温馨
自定义对方称呼
自定义关键词
3种祝福风格：传统典雅、现代时尚、幽默风趣

2. 便捷操作

一键生成祝福语
一键复制到剪贴板
一键分享到社交媒体
一键保存为图片（开发中）
随机切换祝福语

3. 精美UI

春节主题设计
红色渐变背景
响应式布局
流畅的动画效果

安装与运行

环境要求

Node.js >= 16.0.0
npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:3000

生产构建

npm run build

构建产物将输出到 dist 目录

预览构建结果

npm run preview

部署指南

GitHub Pages 部署（推荐，完全免费）

详细步骤请参考 GITHUB_DEPLOY.md

快速开始：

创建 GitHub 仓库
推送代码到 GitHub
在仓库 Settings → Pages 中启用
访问 https://YOUR_USERNAME.github.io/spring-blessing-generator/

Gitee Pages 部署

将代码推送到 Gitee 仓库
在仓库页面点击 “服务” → “Gitee Pages”
选择构建分支（通常是 main 或 master）
构建目录设置为 dist
点击启动，等待部署完成

其他部署方式

项目构建后生成的 dist 目录可以部署到任何静态网站托管服务：

Vercel
Netlify
自己的服务器

项目结构

spring-blessing-generator/
├── public/                 # 静态资源
├── src/
│   ├── components/        # 组件
│   ├── styles/           # 样式文件
│   │   └── main.css      # 主样式
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── index.html            # HTML 模板
├── package.json          # 项目配置
├── vite.config.js        # Vite 配置
├── tailwind.config.js    # Tailwind CSS 配置
├── postcss.config.js     # PostCSS 配置
└── README.md             # 项目说明

功能演示

生成祝福语

选择祝福类型（家人、朋友、商务等）
输入对方称呼（可选）
输入自定义关键词（可选）
选择祝福风格
点击"生成祝福语"按钮

复制祝福语

点击"复制"按钮，祝福语自动复制到剪贴板

分享祝福语

点击"分享"按钮，调用系统分享功能

切换祝福语

点击"换一条"按钮，随机生成新的祝福语

使用到的 iFlow CLI 功能

工具类

web_fetch - 获取 GitHub 仓库信息，了解项目结构和技术栈
list_directory - 查看项目目录结构，确认文件位置
read_file - 读取多个配置文件：
- index.html - 发现错误的 script 路径
- vite.config.js - 检查构建配置
- package.json - 了解项目依赖
- .gitignore - 修改 git 忽略规则
- docs/index.html - 验证构建结果
replace - 修改文件内容：
- 修改 index.html 中的 script 路径
- 修改 vite.config.js 的输出目录
- 修改 .gitignore 规则
run_shell_command - 执行系统命令：
- git clone - 克隆仓库
- npm install - 安装依赖
- npm run build - 构建项目