# 新手用AI从0-1开发网站 - 网站前端AI提示词
## 前端环境准备：
1. 本地电脑安装nodejs20+
- https://nodejs.org/zh-cn/download
2. 新建文件夹ai-web-01（根据自己的需求命名，记得替换提示词中的文件夹名称）
- 打开cursor后进入项目文件夹ai-web-01
## 新建网站前端框架
1. 新建项目框架
不要询问，直接执行命令。
目录ai-web-01下新建一个网站前端项目frontend-web01，基于nodejs20+Vue3+vite+TypeScript，我们的网站名是知识乐园
- 直接使用 Vite 模板，完全跳过交互，可以直接使用 Vite 的 Vue+TS 模板: npm create vite@latest my-project -- --template vue-ts
- 在该项目下的package.json中添加必要依赖，注意不要添加其他非必要依赖，一次性安装
- 要注意Vue Router 4中RouteRecordRaw的导入方式
- 在这一步里，请不要写与基础框架无关的页面，比如除了首页、404之外的其他页面。
- 检测是否安装node.js，如果未安装则安装，若已安装则无需再次安装
- 创建一个简洁的 README.md 文件，包含项目介绍和启动方法
- 确保代码是响应式的，不需要兼容移动端，所有页面默认是pc端页面
- 项目运行默认端口8000
- 创建.gitignore文件，并添加Vue项目常见的忽略内容
2. 添加依赖
进入项目，在该项目下的package.json中添加以下依赖：
Element Plus、Vue Router、axios、echarts、mitt、vuex、vuex-along
- 注意组件版本兼容性
- 在这一步里，不要添加任何与基础框架无关的页面。
3. 创建布局
创建布局，需要包含以下组件：
Layout主组件，作为路由的父级容器，主组件内嵌套header组件、内容区router-view、footer组件
调整项目整体样式，整体宽度100%，header组件高度为60px，layout的内容区域根据设备自适应宽度（PC端1280px，移动端375px）
header内容区要添加导航栏，导航栏的宽度要略大于内容区宽度，让页面布局更加协调，导航项：主页、圈子、工具包、教程、问答、求职，设置活跃项的底部蓝色指示线
导航栏右侧添加搜索框并添加搜索按钮，新增"发布"和"登录"按钮，优化布局和间距
header组件、内容区、footer组件优化布局和间距
- 用一个默认正方形图片作为logo，默认图片从这个网站引用https://picsum.photos/
- 在这一步里，不要添加任何与基础框架无关的页面。
## 开发页面
找对标站点的页面，截图当做设计图
把设计图发给cursor对话框，让cursor参考设计图的布局以及样式，创建页面
循环往复，直到完成所有页面、
小技巧：先让cursor创建一个默认页面，然后上传设计图，让Cursor根据设计图调整布局、样式、功能模块
比如：
1. 参考这个设计图的布局与样式，修改首页以及header组件里的导航栏布局，不要修改导航项，我们的网站名是知识乐园
2. 根据新上传的这个设计图，修改 Home 页面的布局和样式，保持现有文字内容不变，同时保持 已有的header 导航栏组件不变。
3. 这个首页布局与样式还需要继续优化，参考我刚才给你的设计图，继续优化布局样式
4. 调整页面布局，让热门圈子模块占据所有宽度，并将圈子榜单放在热门圈子下方，与热门话题在同一行。
5. 根据设计图，新增圈子详情页面，首页点击圈子卡片后，跳转到该详情页面
无设计图时，可以提要求让AI新建页面，需要详细描述页面大致布局以及功能：
比如：
1. 新建登录页面，知识分享网站登录页面，包含表单、用户名、密码输入框、忘记密码和立即注册按钮
2. 新增一个注册页面，与登录页面的风格一致，表单内容要用户名、昵称、性别、密码、确认密码，以及勾选阅读同意用户协议和隐私政策，还有一个已有账号返回登录的文字按钮
## 网站对接后台接口
创建圈子页面需要对接新增圈子的接口，接口地址：http://192.168.31.120:3000/api/circles/create，
请求的Header要有Authorization参数，参数值参考：Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTMsInVzZXJuYW1lIjoid2FuZyIsImVtYWlsIjoiYXNmZXdmQHFxLmNvbSIsInJvbGUiOjEsImlhdCI6MTc1MDE3NDM5NywiZXhwIjoxNzUwNzc5MTk3fQ.ANNSwya0TVLgqN3j971zhsu1ttK8jUrsBo9SbzSTNxQ
，请求参数：
{
"category_id": 1,
"category_name": "科技",
"type": 1,
"name": "AI技术交流圈",
"cover": "https://example.com/cover.jpg",
"introduction": "这是一个关于人工智能技术的交流圈子",
"content_description": "这里我们将深入讨论机器学习、深度学习等各种AI技术...",
"price": 0.00,
"annual_fee_type": 1,
"status": 1
}
响应结果：
{
"message": "创建圈子成功",
"data": {
"create_time": "2025-06-17T15:37:50.188Z",
"update_time": "2025-06-17T15:37:50.188Z",
"id": 11,
"category_id": 1,
"category_name": "科技",
"type": 1,
"name": "AI技术交流圈",
"cover": "https://example.com/cover.jpg",
"introduction": "这是一个关于人工智能技术的交流圈子",
"content_description": "这里我们将深入讨论机器学习、深度学习等各种AI技术...",
"price": 0,
"annual_fee_type": 1,
"status": 1,
"author_id": 13,
"author_name": "wang",
"member_count": 0,
"post_count": 0
}
}
注册页面需要对接注册接口，接口地址：http://localhost:3000/api/auth/register，请求参数：{
"username": "john_do123e",
"email": "john123@example.com",
"password": "securePassword123",
"confirmPassword": "securePassword123",
"nickname": "John",
"gender": 1
}，响应结果：{
"message": "注册成功",
"user": {
"id": 12,
"username": "john_do123e",
"email": "john123@example.com",
"nickname": "John",
"role": 1
},
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTIsInVzZXJuYW1lIjoiam9obl9kbzEyM2UiLCJlbWFpbCI6ImpvaG4xMjNAZXhhbXBsZS5jb20iLCJyb2xlIjoxLCJpYXQiOjE3NDk3NDMwMzMsImV4cCI6MTc1MDM0NzgzM30.Soz7VOxH9YanJQtnyIiPsArA5Q4iCaLZ9mcW5bbp4yo"
}
登录页面需要对接登录接口，接口地址：http://192.168.31.120:3000/api/auth/login，请求参数：{
"login": "test@example.com",
"password": "Password123!"
},响应结果：{
"message": "注册成功",
"user": {
"id": 12,
"username": "john_do123e",
"email": "john123@example.com",
"nickname": "John",
"role": 1
},
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTIsInVzZXJuYW1lIjoiam9obl9kbzEyM2UiLCJlbWFpbCI6ImpvaG4xMjNAZXhhbXBsZS5jb20iLCJyb2xlIjoxLCJpYXQiOjE3NDk3NDMwMzMsImV4cCI6MTc1MDM0NzgzM30.Soz7VOxH9YanJQtnyIiPsArA5Q4iCaLZ9mcW5bbp4yo"
}
获取到token，需要保存在localStorage中，下次登录时，从localStorage中获取token，并添加到请求头中。登录成功后，跳转到首页，首页的登录按钮改为用户信息
首页热门圈子模块，需要对接获取圈子列表接口，接口地址：http://192.168.31.120:3000/api/circles，这个接口是post请求，
请求参数：{
"page": 1,
"pageSize": 8
}
响应结果：{
"message": "获取圈子列表成功",
"data": {
"circles": [
{
"id": 5,
"category_id": 4,
"category_name": "艺术",
"type": 1,
"name": "摄影爱好者",
"cover": "https://example.com/covers/photography.jpg",
"introduction": "摄影作品分享与点评",
"content_description": "分享摄影技巧、作品和后期处理经验。定期组织线下拍摄活动。",
"price": "199.00",
"annual_fee_type": 4,
"create_time": "2023-04-12T11:10:00.000Z",
"update_time": "2023-06-17T09:45:00.000Z",
"status": 1,
"author_id": 105,
"author_name": "陈摄影师",
"member_count": 432,
"post_count": 287
}
],
"pagination": {
"total": 10,
"page": 1,
"pageSize": 10,
"totalPages": 1
}
}
}
首页圈子分类模块，需要获取圈子类型接口渲染标签组，接口地址：http://192.168.31.120:3000/api/circles/categories，这个接口是post请求，
请求参数：{
"parent_id": 0,
"status": 1,
"level": 1,
"is_tree": true
}
响应结果：{
"message": "获取圈子分类列表成功",
"data": [
{
"id": 1,
"name": "科技",
"description": "探索科技前沿，分享技术心得",
"icon": "https://example.com/icons/tech.png",
"cover_image": "https://example.com/covers/tech.jpg",
"parent_id": 0,
"level": 1,
"sort_order": 100,
"status": 1,
"circle_count": 15,
"created_at": "2025-06-16T22:55:04.000Z",
"updated_at": "2025-06-16T22:55:04.000Z",
"created_by": 1,
"updated_by": null,
"is_deleted": 0
}
]
}
首页圈子榜单模块，点击tab按钮，需要对接根据圈子类型id获取学习榜单接口,只获取5条数据，接口地址：http://192.168.31.120:3000/api/circles/rank，这个接口是post请求，
请求参数：{
"page": 1,
"pageSize": 5,
"category_id": 1
}
响应结果：{
"message": "获取圈子学习榜单成功",
"data": {
"circles": [
{
"id": 1,
"category_id": 1,
"category_name": "科技",
"circle_id": 101,
"circle_name": "AI技术前沿",
"circle_cover": "https://example.com/covers/ai-tech.jpg",
"circle_intro": "人工智能技术交流",
"author_name": "张教授",
"heat_score": "98.50",
"member_count": 3200,
"post_count": 850,
"like_count": 12500,
"comment_count": 4200,
"view_count": 85600,
"activity_score": "95.20",
"rank_position": 1,
"rank_change": 1,
"rank_type": 1,
"rank_date": "2023-06-25",
"rank_time": "2023-06-25T09:00:00.000Z"
}
],
"pagination": {
"total": 1,
"page": 1,
"pageSize": 10,
"totalPages": 1
}
}
}
圈子详情页面，需要对接获取圈子详情信息的接口,接口地址：http://192.168.31.120:3000/api/circles/detail，这个接口是post请求，
请求参数：
{
"id": 1 // 圈子ID（必填）
}
响应结果：
{
"message": "获取圈子详情成功",
"data": {
"circle": {
"id": 1,
"category_id": 2,
"category_name": "技术",
"type": 1,
"name": "编程学习",
"cover": "https://picsum.photos/200/300",
"introduction": "一起学习编程技术",
"content_description": "详细介绍...",
"price": 0.00,
"annual_fee_type": 1,
"status": 1,
"author_id": 5,
"author_name": "技术大牛",
"member_count": 120,
"post_count": 56,
"create_time": "2023-06-15T12:30:45",
"update_time": "2023-06-15T12:30:45"
},
"featuredTopics": [
{
"id": 1,
"circle_id": 1,
"topic_name": "精华主题1",
"topic_description": "描述...",
"topic_level": 3,
"is_sticky": true,
// 其他主题字段...
},
// 更多精华主题...
],
"benefits": [
{
"id": 1,
"circle_id": 1,
"benefit_name": "专属内容",
"description": "可以查看所有会员专属内容",
"sort_order": 10,
"create_time": "2023-06-15T12:30:45",
"update_time": "2023-06-15T12:30:45"
},
// 更多会员权益...
]
}
}
