Vibe Coding 实战：我用 Nuxt 3＋NestJS 做了一个电商运营 SaaS

一、项目背景

最近，我通过 Vibe Coding 的方式开发了一个电商运营 SaaS，名字叫"电商达人"。

产品地址：

https://dszs.online

电商达人面向国内与海外电商卖家，当前主要提供以下功能：

商品标题生成
SKU名称整理
ROI与利润测算
申诉文案辅助
商品和成本管理
电商运营文章
用户反馈和版本记录

项目并不是从"我要用AI做一个网站"开始，而是从电商运营中的重复问题开始。

例如，发布一件商品时，需要反复整理商品名称、属性、颜色、尺寸、容量、套餐和卖点。

经营过程中，又需要统计采购、物流、平台费用、退款损耗和推广成本。

这些工作都有一定规律，但使用通用聊天工具时，每次都要重新描述上下文，输出格式也很难保持一致。

因此，我希望把高频场景拆成独立工具，让用户按照固定字段输入信息，再获得结构相对稳定的结果。

二、技术选型

项目采用前后端分离架构。

前端主要使用：

Nuxt 3
Vue 3
TypeScript
Composition API
UnoCSS
Pinia

后端主要使用：

NestJS
Prisma
MySQL
Redis

部署部分还涉及：

Node.js
Nginx
Docker
HTTPS
数据库备份
SSR与页面预渲染

整体结构可以概括为：

text 复制代码

用户浏览器
    │
    ▼
Nuxt 3 前端
    │
    ├── 商品标题
    ├── SKU生成
    ├── ROI计算
    ├── 申诉文案
    ├── 文章系统
    └── 用户中心
    │
    ▼
NestJS API
    │
    ├── 用户与权限
    ├── 商品与成本
    ├── AI生成任务
    ├── 积分与会员
    ├── 用户反馈
    └── 访问埋点
    │
    ▼
MySQL / Redis

三、为什么前端选择Nuxt 3？

如果只是做一个后台工具，普通Vue单页应用也能满足需求。

但电商达人除了登录后使用的工具，还需要首页、产品介绍、文章中心、关于我们和版本日志等公开页面。

这些页面需要被搜索引擎正常抓取，因此项目需要考虑：

SSR服务端渲染
页面Meta信息
Canonical链接
Open Graph分享信息
JSON-LD结构化数据
Sitemap
静态预渲染
文章独立URL

Nuxt 3在这些方面比普通Vue SPA更加方便。

例如，公开页面可以通过统一的SEO方法设置标题、描述和结构化数据：

ts 复制代码

useSEO({
  title: '关于我们｜电商达人 AI 电商运营工具',
  description: '了解电商达人的产品定位、开发背景和适用用户。',
  keywords: '电商达人,AI电商工具,Vibe Coding,电商运营',
  schema: {
    '@type': 'AboutPage',
    name: '关于电商达人',
    url: 'https://dszs.online/about',
  },
});

对于重要公开页面，还会配置预渲染路由：

ts 复制代码

nitro: {
  prerender: {
    routes: [
      '/',
      '/about',
      '/article',
      '/roi-calc',
      '/sku-generator',
      '/title-generator',
    ],
  },
}

这样部署时可以提前生成对应页面，减少搜索引擎访问时只能获取空壳页面的风险。

四、商品标题和SKU为什么要做成独立工具？

调用大模型生成一段商品标题并不困难。

真正困难的是控制输入和输出。

如果用户只输入一句：

text 复制代码

帮我生成一个水杯标题

模型并不知道水杯的材质、容量、颜色、适用人群和使用场景，很容易添加商品并不具备的卖点。

因此，标题生成器需要将输入拆成更明确的字段：

text 复制代码

核心商品名称
真实商品属性
主要卖点
适用人群
使用场景
目标平台
禁用词语

模型只负责组织用户提供的事实，不能自动添加无法验证的品牌、材质或者极限表达。

SKU生成也存在类似问题。

商品可能同时包含颜色、尺寸、容量、数量和套餐。如果缺少统一结构，同一组SKU可能出现完全不同的表达方式。

例如：

text 复制代码

米白色｜大号｜2件装
深灰色｜大号｜2件装
米白色｜小号｜单件

相比"默认款""升级款""套餐一"，这种表达更容易让消费者、客服和仓库理解。

五、ROI计算器的难点不是写公式

ROI计算器看起来像一个简单的数学功能，但实现过程中，最重要的是确定数据口径。

成交额、结算收入、毛利润、净利润和广告投产比并不是同一个概念。

实际利润可能需要考虑：

text 复制代码

商品售价
- 商品采购成本
- 包装费用
- 物流费用
- 平台费用
- 支付手续费
- 退款损耗
- 推广费用
= 实际利润

如果用户遗漏退款损耗或者平台费用，即使程序计算完全正确，最终结果仍然会产生偏差。

因此，ROI工具不仅需要给出结果，还需要通过字段说明帮助用户理解每项数据应该如何填写。

这个功能让我更加确定：AI和程序可以提高计算效率，但不能替代业务口径。

如果开发者自己没有弄清楚"应该算什么"，代码写得再快也没有意义。

六、Vibe Coding在项目中如何工作？

我在这个项目中使用Vibe Coding，并不是把整个项目一次性交给AI。

实际流程更接近下面这样：

1. 先提供项目上下文

新增功能前，先让AI了解：

当前技术栈
已有目录结构
相关页面和组件
数据模型
接口调用方式
登录与积分逻辑
埋点规范
不能修改的业务部分

如果缺少上下文，AI很容易重复实现已有能力，或者在解决局部问题时破坏其他逻辑。

2. 把大需求拆成小任务

例如新增一篇文章，会拆成：

增加文章数据
选择文章版式
添加文章封面
增加预渲染路由
更新Sitemap
检查文章URL
添加页面访问记录

每一步都能独立检查，出现问题时也更容易定位。

3. 通过截图持续反馈

页面样式只看代码很难一次调整准确。

开发过程中，我会直接截取真实页面，指出具体问题：

卡片间距太大
编号逻辑不合理
无序内容不应该显示连续序号
按钮悬停颜色与背景不搭配
浅色页面中突然出现深色横幅
手机端内容过于拥挤

AI根据截图继续修改，修改后再检查实际效果。

4. 把重复问题写入项目规范

如果只在当前对话里解决问题，下一次开发时可能再次出现。

因此，项目中增加了明确的协作规则，例如：

统一使用Composition API
页面样式优先使用UnoCSS
新文章必须配置稳定Slug
新文章必须加入预渲染路由
新文章必须更新Sitemap
按钮必须检查默认、Hover和Focus状态
浅色页面不能随意加入大面积深色块
无序内容不能强行显示连续编号

这样后续AI读取项目规范后，就能延续之前已经确认的设计和工程判断。

七、开发过程中遇到的几个问题

1. 能运行不代表符合业务要求

AI生成的页面和代码通常可以快速运行，但字段含义、计算口径和交互流程未必正确。

所以每个功能都必须先定义验收标准。

2. 全局序号不适合所有内容

文章系统最初直接显示数据中的order字段，导致某些章节从17、18、19开始编号。

后来调整为：

有明确先后关系的步骤，按照当前数组从1开始编号
并列知识点和独立建议不显示序号
步骤版式将编号直接加入二级标题

这类问题并不是语法错误，而是内容结构和视觉表达不一致。

3. Nuxt文件命名会影响页面识别

此前部分组件使用了特殊文件命名，并放在页面目录中，导致Nuxt开发环境无法正常监听热更新。

后来将这些组件移动到独立的widgets目录，并使用明确的组件名称和导入路径，热更新恢复正常。

4. SEO不是添加Meta就结束了

一个页面要参与搜索收录，还需要同步考虑：

页面是否允许索引
URL是否稳定
是否设置Canonical
是否加入Sitemap
是否配置预渲染
分享图片是否存在
结构化数据是否与正文一致
页面之间是否有内部链接

文章发布流程中只要遗漏其中一步，就可能影响最终收录效果。

八、从Demo到SaaS还需要哪些功能？

电商达人第一版只是几个独立工具。

要成为一个能够长期使用的Web产品，后来还补充了：

注册和登录
邮箱验证码
滑块验证码
用户积分
产品和成本管理
用户反馈
管理后台
版本更新日志
页面访问埋点
文章内容系统
SEO与预渲染
生产部署配置

这些功能可能没有AI生成按钮那么显眼，但它们决定了项目能否持续运行和维护。

九、我对Vibe Coding的几点理解

1. AI提高的是实现速度，不是判断质量

业务规则如果错误，AI只会更快地实现错误结果。

2. 描述问题比描述功能更重要

"增加一个页面"不如说明目标用户、当前问题、已有逻辑和验收标准。

3. 任务必须可验证

每次修改都应该能够通过页面、数据、类型或者局部静态检查进行验证。

4. 项目规范会影响长期效率

把命名、样式、SEO和发布流程写进项目规范，可以减少重复沟通和重复错误。

5. 人的角色正在发生变化

使用AI后，开发者会把更多时间花在需求拆解、架构选择、业务规则、产品取舍和结果验收上。

十、总结

通过这个项目，我认为Vibe Coding确实可以帮助独立开发者完成一个真正上线的SaaS。

但它并不是"一句话生成产品"。

从想法到上线，仍然需要处理：

业务需求
数据结构
前后端逻辑
用户体验
异常状态
SEO
部署
监控
持续维护

AI可以参与其中的大部分实现工作，但最终做什么、为什么做、结果是否可信，仍然需要开发者负责。

目前电商达人还在持续迭代，后续会继续完善拼多多、淘宝等国内平台的运营场景，并加强商品、SKU、标题和成本数据之间的复用。

产品体验地址：

https://dszs.online

如果你也在使用Vibe Coding开发产品，欢迎交流你在需求拆解、AI协作或者项目上线过程中遇到的问题。