Appearance

03 架构设计 ​

3.1 Nuxt 源码根目录 ​

nuxt.config.ts 设置 srcDir: 'app'，因此 Nuxt 的 pages、components、composables、middleware、plugins 等目录均位于 app/ 下。

3.2 启动流程 ​

text
Nuxt 创建应用
  → app/plugins/app-init.ts 初始化 ECShopX 配置
  → bootstrap.ts 执行应用入口初始化
  → auth-init / currency-init 等插件恢复运行时状态
  → http.ts 创建全局 $api
  → 全局中间件检查语言和认证
  → 文件系统路由渲染页面

app-init.ts 会调用 initializeEcshopx()，并注入 appConfig 与 constants。插件执行顺序如有依赖，应通过 Nuxt 插件配置或明确的初始化函数管理，不要依赖文件名猜测顺序。

3.3 目录分层 ​

  • pages/：路由入口和页面编排。
  • components/：可跨页面复用的组件。
  • composables/：组合式业务能力。
  • stores/：跨组件、跨页面状态。
  • infrastructure/http/clients/：API Client。
  • infrastructure/transformers/：接口模型到前端模型的转换。
  • types/：接口、领域和组件类型。
  • shared/：值对象、语言配置等通用领域能力。
  • decoration-engine/：DSL 页面渲染和装修预览。
  • templateEngines/：业务模式模板和区块。

3.4 SSR 与客户端边界 ​

页面和 composable 默认可能在服务端执行。访问 localStorage、window、document、FormData 等浏览器对象前，应使用 import.meta.client 或客户端插件。认证 Cookie 可在 SSR 与客户端读取，但需要避免在服务端执行仅浏览器可用逻辑。

3.5 数据流 ​

页面调用 composable 或 Store，Store 再调用 API Client；Client 使用注入的 $api 发起请求，Transformer 将响应转换为前端模型，最后由 Store 或页面更新视图。