大学生web前端结课考核项目（vue3+vite+tailwindcss）

Part 1 题目要求

一、题目：完成一个纯前端的项目，项目的主题要求是健康的、积极向上的，主题自拟。项目内容要主题相关，内容版块规划完整（如：中国之声-中国传统乐器、扎染等）。

二、技术要求：使用Vue3开发，Vue3的UI框架不限（可以使用uni-app、Element Plus、Vant等你熟悉的都可以。）

三、数据要求：页面上呈现的内容，来源于数据，不能把内容数据写死在模板中，不要求写后端，可以把数据写在脚本中、js文件、json文件等本地存储中。

注：

（1）可以使用免费的API

根据你的项目需求，数据也可以请求免费的API，例如天行数据：https://www.tianapi.com/

聚和数据：https://www.juhe.cn/

（如：基础健康健美查询系统、诗）

（2）自己写后端

自己写后端的，要求后端部署上线，后端代码不用提交，也不记分。

要求后端部署上线的原因：一个是为了方便评审作品，另一个是参赛必须是能正常运行的作品。

结课项目可参加的赛事：

https://www.cdec.org.cn/

https://www.ncda.org.cn/

http://www.cmit.cn/（该赛）

四、提交作品时间：第19周星期二（6月24日）

五、提交材料包：

（1）作品项目源码

（2）作品效果视频（操作演示，可以不用讲解，限制在4分钟之内）

（3）说明

在“说明.txt”文件中写上本作品用到的技术。例如：Vue3+uniapp+pinia+（天聚数行TianAPI - 应用开发者API数据调用平台免费API），其它一些需要说明的也写在该文档中。

六、示例网址：实验题 历届作品

http://zuopin.sandbox.youyue.info/

Part 2 确定技术栈

文章连接：轻氧生活 - 技术栈详细说明-优快云博客《轻氧生活》采用Vue 3 + Composition API构建前端，搭配Vite实现快速开发。技术栈包含TailwindCSS原子化样式、Iconify图标系统，通过Composables实现状态管理。系统支持JWT认证、地图导航、视频播放等核心功能，采用代码分割、懒加载等优化策略，并保障移动端响应式体验。开发工具链包含ESLint、Husky等质量管控，部署时采用CDN加速和Gzip压缩。兼容主流现代浏览器，并考虑了XSS防护等安全措施，构建了高性能的轻量级健康生活应用。https://blog.youkuaiyun.com/wangyyi2022/article/details/148843283?fromshare=blogdetail&sharetype=blogdetail&sharerId=148843283&sharerefer=PC&sharesource=wangyyi2022&sharefrom=from_link

Part 3 主题细化

null「轻氧生活」是一个倡导城市健康运动的平台，核心理念是将运动无缝融入日常生活。平台提供丰富的实用功能：可视化城市运动热点地图标注跑步路线与健身点位；轻量课程库包含办公室微运动等碎片化训练方案；健康数据看板追踪运动成果并设置成就激励；用户故事墙分享普通人通过城市运动改变生活的真实案例。同时提供免费资源下载，如安全指南和拉伸图解，帮助都市人群实现「10分钟让城市成为健身房」的健康生活方式。https://blog.youkuaiyun.com/wangyyi2022/article/details/148843391?fromshare=blogdetail&sharetype=blogdetail&sharerId=148843391&sharerefer=PC&sharesource=wangyyi2022&sharefrom=from_link

Part 4 代码下载

文章顶部下载即可。