企业官网建设流程全解析

文章目录

• • 一、为什么这个项目值得你花10分钟读完
  • 二、3分钟快速上手指南：从克隆到运行
  • • 第一步：项目初始化
    • 第二步：一条命令开始克隆
    • 第三步：运行与验证
  • 三、技术栈全景：Next.js 16 + Tailwind v4 + shadcn/ui 的黄金组合
  • • 3.1 框架层：Next.js 16.3.5
    • 3.2 UI层：shadcn/ui（base-nova风格）
    • 3.3 样式层：Tailwind CSS v4 + oklch设计令牌
    • 3.4 工具层
  • 四、系统架构深度解析
  • 五、五阶段克隆流水线：一条命令背后发生了什么
  • • 5.1 Phase 1：侦察（Reconnaissance）
    • 5.2 Phase 2：基础构建（Foundation）
    • 5.3 Phase 3：组件规格与分派（Component Specs & Dispatch）
    • 5.4 Phase 4：并行构建（Parallel Build）
    • 5.5 Phase 5：页面组装与视觉QA（Assembly & Visual QA）
  • 六、九大黄金设计原则：为什么它克隆出来的网站"就是像"
  • • 原则1：完整性优于速度
    • 原则2：小任务，完美结果
    • 原则3：真实内容，真实资源
    • 原则4：基础先行
    • 原则5：提取外观 AND 行为
    • 原则6：构建前识别交互模型
    • 原则7：提取每个状态，不只是默认状态
    • 原则8：规格文件是唯一真相来源
    • 原则9：构建必须始终编译通过
  • 七、输出隔离与路由保留：多站点克隆的工程化智慧
  • • 7.1 碰撞抗性命名
    • 7.2 五重隔离根
    • 7.3 路由保留策略
    • 7.4 多origin处理
  • 八、核心重难点代码解析
  • • 8.1 资产发现脚本：一行代码枚举页面所有资源
    • 8.2 逐组件CSS提取脚本：递归遍历DOM树
    • 8.3 多状态样式提取：A/B Diff法
    • 8.4 cn()工具函数：Tailwind类名合并的标准解法
    • 8.5 Docker多阶段构建：从1GB到100MB的瘦身术
  • 九、并行构建机制：git worktree 的神仙用法
  • 十、Docker容器化：开发与生产双模式
  • • 10.1 生产模式：多阶段构建
    • 10.2 开发模式：热重载
    • 10.3 docker-compose双服务
  • 十一、CI/CD质量保障：三道闸门
  • 十二、项目模块架构全景
  • • 单一真相来源设计
  • 十三、版本演进之路：从0.1到0.5.1
  • 十四、使用场景与边界：能做什么，不能做什么
  • • 14.1 三大核心使用场景
    • 14.2 明确的边界（不适用场景）
    • 14.3 默认范围定义
  • 十五、写在最后：这篇文章值回票价了吗