技术栈
Nuxt.jsVue.jsStrapiNode.jsBootstrap-VueVuexSCSSAxiosSQLiteNightwatch.jsPWA
项目概述
一个面向消费者的平台,帮助国际旅客查找并预约所需的健康检测。该网站为已接种和未接种疫苗的旅客提供量身定制的检测方案,为各大航空公司和机场设有专属页面,并配备动态产品目录和集成的 FAQ 系统。
核心功能
- 动态产品目录,价格、描述和预约选项均通过 headless CMS 管理
- 针对特定航空公司和机场的落地页,提供量身定制的检测指引
- 服务端渲染,配合页面级缓存以实现快速加载
- 基于令牌的用户身份验证,支持登录和个人资料管理
- FAQ 手风琴系统和分步式"操作指南"
- SEO 优化——自动生成站点地图、元标签,并支持静态生成
- PWA manifest,实现可安装的移动端体验
- 集成 Google Analytics、Google Tag Manager 和 Facebook Pixel
- 符合 GDPR 的 Cookie 同意横幅
- 响应式 Bootstrap-Vue 布局,配合滚动动画
架构
采用 Monorepo,后端为 Strapi 4 headless CMS,通过 REST API 提供内容;前端为 Nuxt.js 2,支持服务端渲染并采用 Vuex 状态管理。前端通过 Axios 消费 CMS API,并借助懒加载和 SSR 缓存来提升性能。端到端测试使用 Nightwatch 和 ChromeDriver 运行。