前端0基础用Cursor完成管理系统页面 - 1

news2024/12/16 13:39:51

Cursor下载

下载链接: https://www.cursor.com/

Hello World!

作为完全不会前端的人,首先需要让AI帮我们搭建一个HelloWorld界面

确定语言框架

首先要给AI框定好前端语言和框架,由于AI的物料大量来自网上的开源项目,所以越是受欢迎的开源项目AI越容易写出准确的代码。
问了下认识的人,给我推荐了以下组合

elecron+react+ant design

Promt

现在开始传输指令,按快捷键cmd + I 唤出 Cursor 的 COMPOSER功能,该功能可以联系上下文,接收指令,并在目录下创建多个文件进行代码编写。
因为是0基础,我甚至连前端代码怎么跑都不知道,所以给出以下指令

帮我在当前目录下初始化一个elecron+react+ant design项目,并编写好package.json.
elecron项目仅包含一个简单的helloWorld页面
生成完毕后,给我需要执行的命令

指令响应如下在这里插入图片描述

注意:AI写的代码很多时候不是100%准确,需要反复调试修改,所以为了方便保存上下文,我们不用急着点击accapt保存代码结束当前回话,要不然代码跑不起来就很尴尬

根据提示我安装好nodejs,并在终端依次执行AI给的命令,试图跑起来这个项目。

但很遗憾,执行npm start时,终端上出现了一些保存,网页也是一片空板,因此我们把当前的问题继续作为指令发出

当我跑npm start时,终端报[0] Could not find a required file.
[0]   Name: index.js
[0]   Searched in: /Users/bytedance/ai/src。 同时页面中并没有hello world,应该如何解决

在这里插入图片描述

AI随即自动对代码作出了调整,注意,上图的代码都不用我们手动复制到项目中做调整,AI已自动更改,我们仅需点保存。

根据指令我们继续运行。

可惜页面上依然出现了报错,直接将报错复制到COMPOSER

ERROR in ./src/index.js 6:0-24
Module not found: Error: Can't resolve './App' in '/Users/bytedance/ai/src' 如何解决

在这里插入图片描述

AI随即给出了两种解决方案,并自动按照推荐的第一个方案完成了文件路径的修改

根据提示,再次运行项目,终于在页面上看到了我们需要的Hello World
在这里插入图片描述

结束语

最终目标是在自己几乎不用手动更改代码的前提下,纯用AI完成一个管理系统前端页面的搭建,并接入自己完成的后端接口完成整个项目。
本篇从开始下达第一个指令到最后呈现Hello World都没有看一行代码,关心点全在AI提示我们要在终端输的命令和最终呈现的结果,然后接着反馈。 这种合作关系非常像工作中产品经理和程序猿的关系,只不过今天,我是做为一个产品经理,不断的给AI提出需求,并且要求它修复BUG。
当然,可以想象,随着项目的复杂,AI的准确率会有所下降,要想快速完成项目的搭建,还是要在这个过程中学习些前端的知识,以便提供更准确的prompt来达成我们的目的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2260519.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统组件优化的思考框架

我之前的文章里有分享过自己总结的做技术选型的思考框架,本文将会分享一下我总结的做系统组件调优/优化的思考框架。 组件优化的思考框架 常见的互联网架构基本离不开数据库、缓存、消息队列、搜索、数据处理等等各种组件,虽然组件的形态不一、功能不同…

Linux shell的七大功能 ---自动补齐、管道机制、别名

1、自动补齐---TAB 输入命令的前几个字符,按下tab键,会自动补齐完整的字符,若有多个命令、文件或目录的前几个字符相同,按下tab将会全部列举出来 2、管道机制---| 例如:ls -- help |more 将有关ls的帮助内容传递给“|…

计算机网络-基础概念(HTTP,TPC/IP, DNS,URL)

HTTP不同的版本 HTTP0.9于1990年问世,此时HTTP并没有作为正式的标准被建立。HTTP正式被公布是1996年的5月,版本命名为HTTP/1.0。HTTP1.1,1997年1月公布,目前仍然是主流版本的HTTP协议版本。 TCP/IP 通常使用的网络是在TCP/IP协…

12.3【JAVA-EXP4-DEBUGSTUDY】

java升级版本 JDK 1.8 是 Java Development Kit 的第 8 版本,发布于 2014 年 3 月 18 日。这个版本是 Java SE(Standard Edition)的一部分,包含了 Java 编程语言的实现、编译器、调试工具和其他相关组件 JDK 1.8: 这里的 1.8 表…

在Windows上运行mediapipe:适合新手的AI框架

一、mediapipe简介 mediapipe可以被视为谷歌版的onnx,其设计目的在于跨平台部署AI模型,并提供一系列工具来监测不同平台、不同设备运行人工智能模型时的性能表现。 尽管mediapipe已经陆续支持训练自定义模型,但博主更推荐使用Pytorch/Tenso…

自然语言处理:我的学习心得与笔记

Pytorch 1.Pytorch基本语法 1.1 认识Pytorch 1.2 Pytorch中的autograd 2.Pytorch初步应用 2.1 使用Pytorch构建一个神经网络 2.2 使用Pytorch构建一个分类器 小节总结 学习了什么是Pytorch. 。Pytorch是一个基于Numpy的科学计算包,作为Numpy的替代者,向用户提供使用GPU强大…

IAR环境下STM32静态库编译及使用

IAR环境下STM32静态库编译及使用 前言 最近了解到了STM32的静态库与动态库,在此记录一下STM32静态库的生成与使用。 静态库的作用主要是对代码进行封装及保护,使其他使用者只知其然而不知其所以然,因为封装后的静态库只有.h文件没有.c文件。…

【常考前端面试题总结】---2025

React fiber架构 1.为什么会出现 React fiber 架构? React 15 Stack Reconciler 是通过递归更新子组件 。由于递归执行,所以更新一旦开始,中途就无法中断。当层级很深时,递归更新时间超过了 16ms,用户交互就会卡顿。对于特别庞…

Leetcode 面试150题 399.除法求值

系列博客目录 文章目录 系列博客目录题目思路代码 题目 链接 思路 广度优先搜索 我们可以将整个问题建模成一张图:给定图中的一些点(点即变量),以及某些边的权值(权值即两个变量的比值),试…

hbase读写操作后hdfs内存占用太大的问题

hbase读写操作后hdfs内存占用太大的问题 查看内存信息hbase读写操作 查看内存信息 查看本地磁盘的内存信息 df -h查看hdfs上根目录下各个文件的内存大小 hdfs dfs -du -h /查看hdfs上/hbase目录下各个文件的内存大小 hdfs dfs -du -h /hbase查看hdfs上/hbase/oldWALs目录下…

使用webrtc-streamer查看实时监控

摄像头配置(海康摄像头为例) 摄像头视频编码应改成H264格式 webrtc-streamer下载 webrtc-streamer下载地址 下载后解压出来双击运行,端口默认8000 VUE2项目引入文件 在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“…

L1-3流量分析

1. 初步分析 数据包下载 流量分析基础篇 使用科来网络分析系统,打开L1-3.pcapng数据包,查看数据包中ssh的协议占的比例较大。 2. 通过分析数据包L1-3,找出黑客的IP地址,并将黑客的IP地址作为FLAG(形式:[IP地址)提交; 获取的fl…

【经典】制造供应链四类策略(MTS、MTO、ATO、ETO)细说

关注作者 制造供应链的牛鞭问题与复杂问题主要是从两个方面解决,一是同步化供应链消减从需求到供应的放大效应,二是供应链细分,针对不同的客户、不同的需求供应的匹配策略来应对复杂性,更好的满足客户并以最低的总成本来实现。 对…

前端成长之路:CSS盒子模型

盒子模型是页面布局的核心,通过盒子模型才能更好的进行页面布局。 网页布局的本质 网页布局的核心本质其实是:HTML网页元素就是一个个的盒子box,通过CSS可以设置好盒子的样式,和盒子需要摆放的位置;简单说来就是通过…

LeetCode刷题 -- 字符串

目录 最长公共前缀题目解析算法原理代码 最长回文子串题目解析算法原理代码 二进制求和题目解析算法原理代码 字符串相乘题目解析算法原理代码 最长公共前缀 题目链接 题目解析 只需找出字符串中的公共的最长字符串即可 算法原理 1.法一:两两字符串比较,…

4G模块详解

在之前的教程中,无线通信技术我们学习了蓝牙和 WiFi,今天我们要来学习 4G。 4G 模块在距离上有个突破,它不像蓝牙短距离,也不像 WiFi 只能在局域网,4G 模块可使用户无论在哪,只要有 4G 网络信号覆盖&#…

uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能

前言 这次的标题有点长,主要是想要表述的功能点有点多; 简单做一下需求描述 产品要求在商品详情页的头部轮播图部分,可以单击预览大图,同时在预览界面可以双指放大缩小图片并且可以移动查看图片,双击放大&#xff0…

数据地图怎么做?推荐这款数据可视化地图生成器

在数字化与信息化高速发展的今天,企业迎来了前所未有的发展机遇,规模迅速扩张,市场版图不断延伸。然而,伴随着这种快速的发展,一个不容忽视的问题逐渐浮出水面——如何精准高效地掌握分布在各地的分公司、业务点乃至整…

hive—常用的日期函数

目录 1、current_date 当前日期 2、now() 或 current_timestamp() 当前时间 3、datediff(endDate, startDate) 计算日期相差天数 4、months_between(endDate, startDate) 日期相差月数 5、date_add(startDate, numDays) 日期加N天 6、date_sub(startDate, numDays) 日期减…

【原生js案例】如何让你的网页实现图片的按需加载

按需加载,这个词应该都不陌生了。我用到你的时候,你才出现就可以了。对于一个很多图片的网站,按需加载图片是优化网站性能的一个关键点。减少无效的http请求,提升网站加载速度。 感兴趣的可以关注下我的系列课程【webApp之h5端实…