AI编程②：怎么用cursor对话开发前端

什么是前端？

假设一个餐厅，你进入餐厅看到的装修，桌子，凳子这些表示就是前端。

前端是用户能看到和交互的界面

 

前端的呈现形式

  • 电脑端网页形式
  • 小程序形式
  • APP形式
  • 手机端网页形式

不管他们以什么样的形式呈现，中心思想都是一样的：让用户用起来更爽。

 

 

前端的基础结构

前端开发，主要就是把“餐厅前厅”打扮得漂漂亮亮，让客人用得舒舒服服。

前端三剑客

  1. HTML (超文本标记语言) -骨架搭建师

￮ 餐厅类比：就像餐厅的整体结构，比如哪里是入口、哪里是吧台、哪里是座位区、哪里是厨房（虽然厨房是后端，但前厅需要知道厨房的门在哪里）。

￮ 作用：HTML负责搭建页面的基本结构，定义页面上“有什么”。比如，这里应该有一个标题，那里应该有一段文字，旁边应该放一张图片，下面应该有一个输入框或一个按钮。它就像房子的框架和墙壁。

  1. CSS (层叠样式表) -形象设计师

￮ 餐厅类比：负责餐厅的装修风格、颜色搭配、桌椅的款式和摆放、灯光的氛围等等。

￮ 作用：CSS专门给HTML搭建好的骨架“穿衣服”，进行美化。它决定了文字是什么颜色、多大字号；图片放在哪里、多大尺寸；按钮是什么形状、什么背景色。它就像房子的装修、涂料和家具。

  1. JavaScript (简称JS) -互动魔法师

￮ 餐厅类比：这是让餐厅“活”起来的关键！想象一下：

▪ 你按了桌上的服务铃（点击按钮），服务员就过来了（触发响应）。

▪ 你翻看电子菜单，图片会自动轮播展示（图片轮播）。

▪ 你在自助点餐机上选择菜品，点错了可以撤销，选好了总价会自动计算（用户操作与页面反馈、动态计算）。

▪ 你预订座位时，如果选的日期没有空位了，系统会立刻提示你（表单验证与即时反馈）。

￮ 作用：JavaScript赋予页面生命，让它能够响应用户的各种操作，实现动态效果和交互功能。它不仅仅是“好看”，更是“好用”的核心。比如：

▪ 当你点击一个按钮时，弹出一个提示框。

▪ 当你的鼠标滑过一张图片时，图片放大或显示更多信息。

▪ 当你填写表单时，它能检查你输入的内容是否符合要求（比如邮箱格式对不对）。

▪ 让网页上的广告图片定时切换。

▪ 实现复杂的动画效果。

一个基本的HTML文档结构如下：

HTML
<!DOCTYPE html> <!-- 告诉浏览器这是HTML5文档 -->
<html>
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码，防止中文乱码 -->
    <title>我的第一个网页</title> <!-- 显示在浏览器标签页的标题 -->
</head>
<body> <!-- 页面的主要内容区域 -->
    <h1>欢迎来到我的网站</h1> <!-- 一个大标题 -->
    <p>这是一个段落，用来介绍一些内容。</p> <!-- 一个段落 -->
    <button>点我一下！</button> <!-- 一个按钮，但现在还没加JS，点了没反应 -->
</body>
</html>

常用的前端框架

  • Vue
  • React
  • Angular
  • 小程序
  • Element-ui
  • ant-design

 

 

 

 

如何与cursor进行前端相关的对话

向Cursor描述前端需求时，可以从这几方面入手：

  1. 页面布局的表达(整个餐厅怎么划分区域？)

❌ 模糊表达： “我需要一个好看的网页。”

✅ 清晰表达 (以一个产品详情页为例)：
“我需要一个响应式的产品详情页面，布局如下：

  • 顶部区域：导航栏，包含logo、搜索框和购物车图标。
  • 主体区域(分为两列)：

￮ 左侧： 产品图片展示区，包含主图和缩略图列表。

￮ 右侧： 产品信息区，包含产品名称、价格、评分、颜色选择、尺寸选择和‘加入购物车’按钮。

  • 底部区域：产品详细信息标签页，包含‘描述’、‘规格’、‘评价’和‘相关产品’四个标签页。
  • 页脚区域：包含联系信息、版权声明和社交媒体链接。

整体设计风格为简约现代，主色调使用白色背景配合蓝色点缀，确保在移动设备上也有良好的显示效果。”
(这里的“响应式”是个术语，可以简单解释为“页面能自动适应不同大小的屏幕，比如电脑、平板、手机都能看得很舒服”。)

  1. UI元素的表达(餐厅里的桌椅板凳、菜单长啥样？)
    UI (用户界面) 元素，就是页面上的具体小零件，比如按钮、输入框、表单等。

❌ 不完整表达： “添加一个联系表单。”

✅ 完整表达 (以一个联系表单为例)：
“需要创建一个联系表单，包含以下元素：

  • 表单标题：‘联系我们’ (24px粗体，居中显示)。
  • 姓名输入框：

￮ 标签：‘您的姓名’

￮ 类型：文本输入框

￮ 验证：必填项，最少2个字符

￮ 占位文本 (输入框里预先显示的灰色提示字)：‘请输入您的姓名’

  • 电子邮箱输入框：

￮ 标签：‘电子邮箱’

￮ 类型：邮箱输入框

￮ 验证：必填项，必须是有效的邮箱格式

￮ 占位文本：‘example@domain.com’

  • 主题下拉菜单：

￮ 标签：‘咨询主题’

￮ 选项：‘产品咨询’、‘技术支持’、‘投诉建议’、‘其他’

￮ 默认值：‘产品咨询’

  • 消息文本区：

￮ 标签：‘您的留言’

￮ 类型：多行文本区

￮ 验证：必填项，最多500字符

￮ 占位文本：‘请详细描述您的问题或建议…’

  • 提交按钮：

￮ 文本：‘发送消息’

￮ 样式：蓝色背景，白色文字，圆角边框

￮ 悬停效果 (鼠标放上去时)：深蓝色背景

  • 表单底部提示：‘我们将在1-2个工作日内回复您’ (灰色小字)”

安装必要的工具

  • 安装nodejs
  • 代码编辑器:比如VS Code (免费，强大，插件多)、Cursor (集成了AI辅助编程功能，对新手友好)。它们是编写HTML, CSS, JavaScript代码的地方。
  • 浏览器:比如Chrome, Firefox, Edge等。它们是最终展示你前端作品的舞台。
  • 针对特定平台的开发工具(如果需要的话):

￮ 小程序开发者工具: 如果你想开发微信小程序或支付宝小程序。

￮ Xcode: 如果你想开发苹果iOS APP (主要使用Swift或Objective-C，但有些前端技术可以打包成APP)。

￮ Android Studio: 如果你想开发安卓APP (主要使用Java或Kotlin，同样有些前端技术方案)。

￮ uni-app: 一个可以使用前端技术来开发跨平台应用（包括APP、小程序等）的框架。

对于初学者来说，一个现代浏览器 + VS Code (或Cursor) + Node.js 就能开始大部分前端学习和实践了。

 

初始化及启动命令【必须先装好Nodejs】

初始化

  • 使用cursor初始化一个前端项目

 以vue举例

1）先拷贝rules到cursor中

[该类型的内容暂不支持下载]

2）使用以下提示词：

根据这个rules @vue3.mdc 初始化一个前端项目，使用yarn进行启动和打包

启动

  • 如果你没有用任何的前端框架，直接刷新网页就可以正常显示
  • 如果用了VUE等框架，需要有启动命令，一般是

JSON
yarn install
yarn run dev

Dev 代表的是开发环境

如果要打包上线，则需要执行命令

JSON
yarn build

会输出一个dist目录，将目录拷贝到线上环境配好Nginx就可以访问了

posted @ 2025-09-11 17:05  周大福001  阅读(204)  评论(0)    收藏  举报