Trae + Supabase + Vercel 开发部署一个系统，真的快如闪电啊~
一、使用的工具和平台
1、Trae Solo （www.trae.cn） 代码生成，不止代码生成。输入“需求提示词”，喝着咖啡，代码就写好了；理想很美好，现实更美好；谁用谁知道。
2、Supabase （supabase.com） (数据库、认证、存储)，负责后端部分，谁用谁知道它的便利。（使用完后，是不是看对面那后端兄弟不顺眼啦，这句话，你们完整跑完一个项目后，再回来细品一下。）
3、Vercel (vercel.com） 完成前端项目部署，真的太舒服啦，运维小哥可以下班啦。
4、Github （github.com) 老baby啦，存放我们"烂"代码哈，不对啊，是Trae生成的，不是我们写的😝，也不需要我们动手写。
二、在Trae 输入你的需求，下面内容请写下你们天马行空的创意哈~。
2.1 需求提示词，没写后端技术和部署要求，后面再逐步加提示词。（推荐这种，先是使用Mock数据，看页面效果）
2.1.1 先输入需求提示词
开发一个文章发布系统，包括B端和C端两部分：
B端管理后台功能
- 用户权限管理
- 文章管理 (增删改查、Markdown编辑)
- 分类管理
- 评论管理
- 仪表盘数据统计
- 中英文国际化支持
C端客户端功能
- 文章列表展示
- 文章详情页
- Markdown内容渲染
- 文章搜索功能
- 分类筛选
- 点赞功能
- 评论功能
- 中英文国际化支持
要求界面美观大气、卡片式的内容
2.1.2 等第一部分完成后，再输入需求提示词
使用Supabase开发后端，使用Vercel部署项目
2.2 需求提示词，直接加上后端技术和部署要求；这要求提前做第四部分的内容，注册Supabase和新增项目，获取配置，不然可能看不到效果。
开发一个文章发布系统，包括B端和C端两部分；使用Supabase开发后端，使用Vercel部署项目：
B端管理后台功能
- 用户权限管理
- 文章管理 (增删改查、Markdown编辑)
- 分类管理
- 评论管理
- 仪表盘数据统计
- 中英文国际化支持
C端客户端功能
- 文章列表展示
- 文章详情页
- Markdown内容渲染
- 文章搜索功能
- 分类筛选
- 点赞功能
- 评论功能
- 中英文国际化支持
要求界面美观大气、卡片式的内容
三、让Trae飞一会吧，我们就静静坐等一会吧，代码🐴上来~（其实Trae 可能需要我们确认操作哈）
3.1 它给我生成代码目录结构
oak-cms/
├── src/
│ ├── components/ # 公共组件
│ ├── locales/ # 国际化资源
│ │ ├── en.json # 英文翻译
│ │ └── zh.json # 中文翻译
│ ├── pages/ # 页面组件
│ │ ├── admin/ # 管理后台页面
│ │ └── client/ # 客户端页面
│ ├── store/ # Zustand状态管理
│ ├── types/ # TypeScript类型定义
│ ├── utils/ # 工具函数
│ │ └── supabaseClient.ts # Supabase客户端配置
│ ├── App.tsx # 根组件
│ ├── i18n.ts # 国际化配置
│ └── main.tsx # 入口文件
|
├── .env # 环境变量这个很重要啊！！！，是Supabase的配置，不要上传到Github。
├── .env.example # 环境变量示例
├── package.json # 依赖配置
├── tsconfig.json # TypeScript配置
├── vite.config.ts # Vite配置
└── vercel.json # Vercel部署配置
四、环境配置
4.1 Supabase 先注册（推荐Github授权登录注册），然后在Supabase控制台创建项目，获取以下信息并填入.env文件：
在“Project OverView -》 Connecting to your new project” 查看下面的值：
NEXT_PUBLIC_SUPABASE_URL=你的项目URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的API KEY
上面的内容写入项目根目录的 .env 文件中
4.2 Supabase 执行SQL
五、本地运行项目，让我们瞧瞧它的效果~
5.1 开发模式
npm run dev
5.2 效果图
5.2.1 c端效果图
5.2.2 b端效果图
六、 将项目推送到GitHub
6.1 代码没毛病啦，页面效果杠杠的。那就把项目推送给老baby吧
七、部署我们的项目
7.1 使用Vercel部署；先注册（推荐Github授权登录注册），然后从Github导入一个我们刚上传项目
- 在Vercel上导入项目
- 配置环境变量
- 部署项目（上面import项目后，推送代码到Github，会自动触发）
7.2 部署成功啦，好期待啊。
7.3 怎么回事，打不开。（国内访问不了，好委屈啊；我的朋友们；找个梯子吧。~┓( ´∀` )┏ ）
访问我们的链接：
访问不了，好委屈啊：
梯子后，再打开：
