用 Bolt.new 快速搭建一个多页电商前端并部署到 Netlify 的全过程分享

直接在浏览器里把电商前端给“搓”出来，Bolt.new 这类 Full-stack Web Container 工具现在效率高得离谱。我这次尝试用它快速搭建一个包含商品列表、详情页和购物车的多页电商 Demo，整个过程从 Prompt 到 Netlify 部署只用了 15 分钟。

最关键的技巧在于不要一次性让它写整个网站，否则很容易在路由跳转和状态管理上出 Bug。我采取的是「原子化构建法」：

先用一个全局定义 Prompt 确立技术栈（React + Tailwind + Lucide React），把整体视觉风格和页面结构定死：

Build a modern e-commerce frontend using React and Tailwind CSS. 
Pages needed: Home (product grid), Product Detail (dynamic routing), and Cart. 
Use a clean, minimal aesthetic with a sticky navigation bar. 
Ensure all pages are fully responsive.

等它生成基础架构后，我发现它默认的商品数据是硬编码的，切换页面时会导致状态丢失。这时候得强行介入，让它把数据抽离到单独的 data/products.ts 文件里，并利用 react-router-dom 处理动态路由。

踩的一个坑是：Bolt 在生成复杂交互（比如购物车数量增减）时，偶尔会写出导致整个页面重新渲染的低效代码。我直接把代码片段扔回去，要求它：

Optimize the CartContext to prevent unnecessary re-renders of the product list when item quantity changes. Use useMemo for the total price calculation.

部署到 Netlify 的步骤非常无脑，但建议不要直接用它的快捷部署，而是走 GitHub 仓库中转。点击右上角的 Deploy → Connect to GitHub → Create Repository。这样后续如果你想用 Cursor 在本地微调细节，可以直接 git pull 下来，改完 push 之后 Netlify 会自动触发 CI/CD 重新构建。

效率提升点总结：
利用 Lucide React 图标库：在 Prompt 里明确指定使用这个库，生成的 UI 质感会瞬间提升，不用自己去找 SVG。
强制要求 TypeScript：虽然 JS 快，但电商这种涉及价格、数量计算的项目，强行要求 Strict Mode 能在生成阶段就规避掉很多 undefined 的低级错误。
路由预设：一定要在第一轮对话就让它配置好 BrowserRouter，否则后期增加页面时，它可能会尝试用状态模拟页面切换，导致 URL 无法刷新，非常麻烦。