年会抽奖程序使用教程

1. 项目介绍

本项目是基于Vue3和Three.js开发的一个年会抽奖程序，名为log-lottery。它提供了一个炫酷的3D球体动态效果，用于年会抽奖等场合。该应用支持奖品、人员、界面、图片和音乐等多种配置，用户可以根据自己的需求进行定制化设置。

2. 项目快速启动

环境要求

• 使用PC端最新版Chrome或Edge浏览器。
• 确保已安装Node.js环境。

克隆项目

首先，你需要克隆项目到本地开发环境：

git clone https://github.com/LOG1997/log-lottery.git

安装依赖

进入项目目录后，安装项目依赖：

cd log-lottery
pnpm i
# 或者
npm install

开发运行

启动开发服务器：

pnpm dev
# 或者
npm run dev

执行上述命令后，应用将在本地开发环境中运行。

打包

当开发完成，准备上线时，执行以下打包命令：

pnpm build
# 或者
npm run build

打包完成后，生成的文件将位于项目目录下的dist文件夹中。

预览

如果你希望以打开HTML文件的方式运行项目，可以执行以下命令进行打包：

pnpm build:file
# 或者
npm run build:file

打包完成后，在dist目录中直接打开index.html即可。

3. 应用案例和最佳实践

配置参与人员

在人员配置管理界面下载Excel模板，按要求填好数据后导入即可。

配置奖项

在奖项配置管理界面添加奖项，自定义修改名称、抽取人数、是否全员参加、图片显示等。

界面配置

可自定义配置标题、列数、卡片颜色、首页图案等，以适应不同的活动风格和主题。

图片和音乐管理

上传图片或音乐，数据使用indexdb在浏览器本地进行存储，确保数据的安全性。

4. 典型生态项目

本项目使用了以下技术栈和库：

• Vue3：现代的前端JavaScript框架。
• Three.js：用于在浏览器中创建和显示3D图形的库。
• IndexDB：一个用于在浏览器中存储大量结构化数据的API。
• Pinia：Vue的轻量级状态管理库。
• DaisyUI：一个基于Tailwind CSS的UI库。

通过本项目，开发者可以学习如何将这些技术整合到一起，开发出互动性强、视觉效果出众的网页应用。