Technical Architecture

个人网站技术架构

这里记录当前项目真实采用的技术选型、模块分层和后续规划。已落地、已安装待规范、规划中的能力会明确区分,避免文档先于代码。

Architecture Map

以 Nuxt 4 为核心,分层支撑内容、设计和工程能力

当前项目更适合先保持轻量自研组件和 token 系统,等真实需求出现后再接入 UI 框架、测试、监控、Storybook 或 3D 能力。

核心运行层

Framework

框架核心Nuxt 4 + Vue 3
已落地
路由与渲染Nuxt pages + Nitro prerender
已落地
HTTP 请求useFetch / $fetch
已落地
状态管理Pinia + persisted state,当前作为备用能力
已安装待规范

设计呈现层

Design UI

基础组件自研 Base Components + Blocks
已落地
样式方案SCSS + primitive / semantic / responsive CSS token
已落地
字体加载@nuxtjs/fontaine + 本地 woff2
已落地
图标unplugin-icons + Lucide icons
已落地
UI 框架Naive UI 暂未安装;如接入需独立 SSR 与样式覆盖策略
规划中
暗黑模式@nuxtjs/color-mode 已接入,主题 token 待完善
已安装待规范

内容与媒体层

Content Media

内容维护@nuxt/content + Nuxt Studio
已落地
图片优化@nuxt/image + IPX
已落地
图表ECharts 已安装,需继续约束 SSR / client-only 使用方式
已安装待规范
轮播Swiper 已安装,需继续约束样式和 SSR 使用方式
已安装待规范
3D暂未接入;如需要优先评估 Three.js
规划中

体验与治理层

Quality

动画GSAP + reduced-motion;@vueuse/motion / Rive / Lottie 暂未接入
已安装待规范
SEO@nuxtjs/seo + sitemap / robots / site config
已落地
PWA@vite-pwa/nuxt
已落地
安全nuxt-security,生产环境启用安全头
已落地
国际化@nuxtjs/i18n,默认中文,英文路由预留
已落地
无障碍@nuxt/a11y
已落地

工程配套层

Tooling

代码规范TypeScript + ESLint + @antfu/eslint-config
已落地
常用工具函数@vueuse/nuxt
已落地
第三方脚本优化@nuxtjs/partytown / @nuxt/scripts 暂未安装,当前暂不需要
规划中
测试Vitest / Vue Test Utils / Playwright / Unlighthouse 暂未安装
规划中
文档Storybook for Nuxt 暂未安装;当前以 /design 页面承载
规划中
监控与部署待根据部署平台补充日志、监控和发布策略
规划中