当前位置：首页 > news >正文

Cursor开发前端的详细过程

news 文章来源：https://blog.csdn.net/weixin_40608446/article/details/145184720 2025/5/11 15:03:25

以下是使用 Cursor 开发前端的详细过程：

一、创建项目

打开 Cursor 并新建项目：
- 启动 Cursor 编辑器。
- 点击 “File” 菜单，选择 “New Project”。
- 在弹出的对话框中，输入项目名称，如 “MyFrontendProject”，并选择项目存储的位置。
- 确保选择 “JavaScript” 或 “TypeScript” 作为主要语言，因为它们是前端开发的主流语言。
创建 HTML 文件：
- 在项目资源管理器中，右键点击项目名称，选择 “New File”。
- 输入文件名，如 “index.html”，然后按回车键确认。

二、编写 HTML 结构

在 index.html 文件中输入以下基本的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My Frontend Project</title>
</head>
<body><h1>Hello, World!</h1><div id="app"></div><script src="main.js"></script>
</body>
</html>

此结构包含一个 h1 元素作为页面标题，一个带有 id 为 “app” 的 div 元素用于后续插入动态内容，以及一个指向 main.js 的 script 元素用于引入 JavaScript 文件。

三、创建 JavaScript 文件

创建 main.js 文件：
- 再次右键点击项目名称，选择 “New File”。
- 输入文件名 “main.js”，并按回车键确认。

四、使用 Cursor 的 AI 辅助编程功能开发 JavaScript 代码

生成基础代码：
- 在 main.js 文件中，按下 Ctrl+K（或相应快捷键），输入自然语言描述，例如 “使用 JavaScript 创建一个函数，该函数在页面上添加一个按钮”。
- Cursor 可能会生成如下代码：

function addButton() {const app = document.getElementById('app');const button = document.createElement('button');button.textContent = 'Click Me';app.appendChild(button);
}addButton();

- 这段代码会创建一个带有 "Click Me" 文本的按钮，并将其添加到 `id` 为 "app" 的 `div` 元素中。

代码优化：
- 选中已生成的代码，按下 Ctrl+Shift+K（或相应快捷键），输入 “优化此代码以避免潜在的性能问题”。
- Cursor 可能会根据其内部的 AI 算法对代码进行优化，例如：

function addButton() {const app = document.querySelector('#app');const button = document.createElement('button');button.textContent = 'Click Me';app.appendChild(button);
}window.addEventListener('DOMContentLoaded', addButton);

- 优化后的代码使用 `querySelector` 替代 `getElementById`，并使用 `DOMContentLoaded` 事件确保在页面加载完成后添加按钮，避免可能的性能问题。

五、使用 JavaScript 框架和库

使用 React 开发：
- 在 index.html 中添加 React 库（你可以使用 CDN 或本地文件）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My React Frontend Project</title><script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">function App() {return (<div><h1>Hello, React!</h1><button>Click Me</button></div>);}ReactDOM.render(<App />, document.getElementById('root'));</script>
</body>
</html>

- 这里使用了 React 的 CDN 资源，并在 `script` 元素中使用了 `text/babel` 类型，允许使用 JSX 语法。

使用 Vue 开发：
- 首先添加 Vue 的 CDN 资源：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-scale=1.0"><title>My Vue Frontend Project</title><script src="https://unpkg.com/vue@3"></script>
</head>
<body><div id="app">{{ message }}</div><script>const app = Vue.createApp({data() {return {message: 'Hello, Vue!'};}});app.mount('#app');</script>
</body>
</html>

- 上述代码使用 Vue 3 创建了一个简单的应用程序，将 `message` 数据绑定到 `div` 元素中。

六、使用 CSS 进行样式设计

创建 CSS 文件：
- 右键点击项目名称，选择 “New File”，输入文件名 “styles.css”。
编写 CSS 代码：
- 在 styles.css 文件中输入以下代码：

body {font-family: Arial, sans-serif;background-color: #f0f0f0;
}
h1 {color: #333;
}
button {padding: 10px 20px;background-color: #007BFF;color: white;border: none;border-radius: 5px;cursor: pointer;
}
button:hover {background-color: #0056b3;
}

- 这段 CSS 代码设置了页面的字体、背景颜色、标题颜色和按钮样式。

链接 CSS 文件：
- 在 index.html 的 head 部分添加以下代码将 CSS 文件链接到 HTML 页面：

<link rel="stylesheet" href="styles.css">

七、开发与调试

开发过程：
- 利用 Cursor 的代码编辑功能，如代码补全、代码格式化、代码块复制粘贴等，继续完善代码。
- 对于更复杂的功能，可以使用 Cursor 的 AI 辅助编程功能，输入自然语言描述，获取相应的代码帮助。
调试代码：
- 在代码中添加 console.log() 语句，输出变量和中间结果，以便在浏览器的开发者工具中查看。
- 你也可以使用浏览器的开发者工具（如 Chrome DevTools）进行调试，检查元素、查看网络请求、分析性能等。

八、构建和部署

构建工具使用（以 Webpack 为例）：
- 在终端（可在 Cursor 中打开）中使用 npm 安装 Webpack 和相应的 loader 或插件：

npm init -y
npm install webpack webpack-cli --save-dev

- 创建 `webpack.config.js` 文件：

const path = require('path');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},mode: 'development'
};

- 在 `package.json` 中添加脚本：

"scripts": {"build": "webpack"
}

- 运行 `npm run build` 命令，将 JavaScript 文件打包到 `dist` 目录中。

九、版本控制和协作

使用 Git 进行版本控制：
- 在项目根目录下，打开终端，输入 git init 初始化 Git 仓库。
- 使用 git add. 将文件添加到暂存区，使用 git commit -m "Initial commit" 进行首次提交。
- 你可以使用 git push 和 git pull 与远程仓库进行代码的推送和拉取操作。

总结

使用 Cursor 开发前端涉及多个步骤，从创建项目、编写 HTML 和 JavaScript 代码，到使用前端框架、样式设计、调试和构建。同时，结合构建工具和版本控制系统，可以更好地管理和部署前端项目。在开发过程中，充分利用 Cursor 的 AI 辅助编程功能，可以加速开发进程，提高开发效率。

在开发前端项目时，你可以根据实际需求灵活运用上述步骤和工具。如果你遇到任何问题或需要更多帮助，欢迎随时向我咨询，让我们一起完成出色的前端项目开发。

Cursor开发前端的详细过程

以下是使用 Cursor 开发前端的详细过程： 一、创建项目打开 Cursor 并新建项目： 启动 Cursor 编辑器。点击 “File” 菜单，选择 “New Project”。在弹出的对话框中，输入项目名称，如 “MyFrontendProject”&#xff0…...

编程日记 2025/1/26 0:01:26

基于微信小程序的移动学习平台的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/1/25 23:57:21

atheris从安装到fuzz输入输出解读

1. 引入模糊测试是一种自动化的软件测试技术，它通过自动生成大量随机数据作为输入来测试程序，以发现潜在的错误、漏洞或崩溃。atheris是一个专门用于CPython（Python的C语言实现）的模糊测试框架。 2. 安装atheris 参考1&#x…...

编程日记 2025/1/25 23:51:15

「机器人」系统辨识实验浅谈

前言系统辨识实验是一种通过实验和数据分析的方法，用于建立物理系统的数学模型的技术。系统辨识是控制工程和系统科学中的重要环节，尤其是在模型未知或复杂的情况下。以下是系统辨识实验的详细介绍： 1. 系统辨识实验的目的 1.1 建模为动态系统（如机械系统、电气系统或生…...

编程日记 2025/1/25 23:50:14

基于Flask的哔哩哔哩评论数据可视化分析系统的设计与实现

【Flask】基于Flask的哔哩哔哩评论数据可视化分析系统的设计与实现（完整系统源码开发笔记详细部署教程）✅ 目录一、项目简介二、项目界面展示三、项目视频展示一、项目简介该系统可以搜索查看作者、播放量、评论等相关信息，并将相关的分析…...

编程日记 2025/1/25 23:48:10

[央企大赛 2025] pwn

拿到堆附件，不清楚哪个是密码哪个是pwn，找到两个pwn，一个RSA密码相对简单（已知e,d,N,直接用N解出k((ed-1)//phi_N(ed-1)//N^2),然后求pq，而phi_N正好是pq的2次方程）。就只复现了两个pwn，感觉还有…...

编程日记 2025/1/25 23:47:09

C语言初阶--折半查找算法

目录练习1：在一个有序数组中查找具体的某个数字n 练习2：编写代码，演示多个字符从两端移动，向中间汇聚练习3：简单编写代码实现，模拟用户登录情景，并且只能登录三次练习4：猜数字…...

编程日记 2025/1/25 23:43:05

Python！从0开始学爬虫：（一）HTTP协议及请求与响应

前言爬虫需要基础知识，HTTP协议只是个开始，除此之外还有很多，我们慢慢来记录。今天的HTTP协议，会有助于我们更好的了解网络。一、什么是HTTP协议 （1）定义 HTTP（超文本传输协议&#xff…...

编程日记 2025/1/25 23:42:01

[ Spring ] Spring Cloud Gateway 2025 Comprehensive Overview

文章目录 Spring Gateway ArchitectureProject Level DependencyService CenterService ProviderGateway ServiceLaunch All Service Spring Gateway Architecture Service Center : register and find service providerService Provider : programs that provide actual serv…...

编程日记 2025/1/25 23:39:59

【项目初始化】自定义异常处理

我们在项目初始化的工作之一就是要自定义异常处理，用来处理项目中出现的各种异常，如业务异常、系统异常等等。这些属于项目的通用基础代码，在任何后端中都可以复用。 1. 自定义错误码自定义错误码，对错误进行收敛，…...

编程日记 2025/1/25 23:38:49

Windows10安装MySQL找不到MSVCR120.dll和MSVCP120.dll问题解决

个人博客地址：Windows10安装MySQL找不到MSVCR120.dll和MSVCP120.dll问题解决 | 一张假钞的真实世界 msvcp120.dll、msvcr120.dll、vcomp120.dll属于VC2013版中的动态链接库，如果丢失重新安装VC2013即可。下载地址：https://www.microsoft.com…...

编程日记 2025/1/25 23:37:47

【嵌入式】总结——Linux驱动开发（三）

鸽了半年，几乎全忘了，幸亏前面还有两篇总结。出于快速体验嵌入式linux的目的，本篇与前两篇一样，重点在于使用、快速体验，uboot、linux、根文件系统不作深入理解，能用就行。重新梳理一下脉络，本…...

编程日记 2025/1/25 23:36:46

计算机图形学：实验三光照与阴影

一、程序功能设计设置了一个3D渲染场景，支持通过键盘和鼠标控制交互，能够动态调整光源位置、物体材质参数等，具有光照、阴影和材质效果的场景渲染。 OpenGL物体渲染和设置创建3D物体：代码中通过 openGLObject 结构体表示一个…...

编程日记 2025/1/25 23:34:43

「机器人」扑翼飞行器混合控制策略缺点浅谈

前言将基于模型的控制与强化学习策略融合在扑翼飞行器中，虽然能够兼顾系统稳定性与极限机动能力，但也面临了更高的系统复杂性、对硬件算力与可靠性的额外要求，以及难以回避的能量效率等方面挑战。以下从四个方面进行归纳与分析。 1. 系统复杂性增加 1.1 两种控制方法的并存…...

编程日记 2025/1/25 23:33:42

蓝桥杯算法日常|c\c++常用竞赛函数总结备用

一、字符处理相关函数大小写判断函数 islower和isupper：是C标准库中的字符分类函数，用于检查一个字符是否为小写字母或大写字母，需包含头文件cctype.h（也可用万能头文件包含）。返回布尔类型值。例如： #…...

编程日记 2025/1/25 23:30:39

每日十题八股-2025年1月24日

1.面试官：Kafka 百万消息积压如何处理？ 2.面试官：最多一次、至少一次和正好一次有什么区别? 3.面试官：你项目是怎么存密码的? 4.面试官：如何设计一个分布式ID？ 5.面试官：单点登录是怎么工作的…...

编程日记 2025/1/25 23:19:25

tomcat的accept-count、max-connections、max-threads三个参数的含义

tomcat的accept-count、max-connections、max-threads三个参数的含义 tomcat的accept-count、max-connections、max-threads三个参数的含义 max-connections：最大连接数最大连接数是指，同一时刻，能够连接的最大请求数需要注意的是&#x…...

编程日记 2025/1/25 23:18:14

【无标题】mysql python 连接

coding:utf8 import os import pymysql import yaml from common.log import logger class Mysql: # 处理.sql备份文件为SQL语句 def __read_sql_file(self,file_path): # 打开SQL文件到f sql_list = [] with open(file_path, ‘r’, encoding=‘utf8’) as f: # 逐行读取和…...

编程日记 2025/1/25 23:16:04

linux naive代理设置

naive linux客户端 Release v132.0.6834.79-2 klzgrad/naiveproxy GitHub Client setup Run ./naive with the following config.json to get a SOCKS5 proxy at local port 1080. {"listen": "socks://127.0.0.1:1080","proxy": "htt…...

编程日记 2025/1/25 23:12:55

[STM32 - 野火] - - - 固件库学习笔记 - - -十一.电源管理系统

一、电源管理系统简介电源管理系统是STM32硬件设计和系统运行的基础，它不仅为芯片本身提供稳定的电源，还通过多种电源管理功能优化功耗、延长电池寿命，并确保系统的可靠性和稳定性。二、电源监控器作用：保证STM32芯片工作在…...

编程日记 2025/1/25 23:10:50

DBO优化最近邻分类预测matlab

蜣螂优化算法（Dung Beetle Optimizer，简称 DBO）作为一种新兴的群智能优化算法，于 2022 年末被提出，其灵感主要来源于蜣螂的滚球、跳舞、觅食、偷窃以及繁殖等行为。本次使用的数据为 Excel 格式的分类数据集。该数据…...

编程日记 2025/1/25 23:04:43

【深入理解FFMPEG】命令行阅读笔记

这里写自定义目录标题第三章 FFmpeg工具使用基础3.1 ffmpeg常用命令3.1.13.1.3 转码流程 3.2 ffprobe 常用命令3.2.1 ffprobe常用参数3.2.2 ffprobe 使用示例 3.3 ffplay常用命令3.3.1 ffplay常用参数3.3.2 ffplay高级参数3.3.4 ffplay快捷键第4章封装与解封装4.1 视频文件转…...

编程日记 2025/1/25 22:59:38

图形化数据报文转换映射工具

目录概要整体架构流程技术名词解释技术细节小结概要在当今数字化时代，数据的处理和分析是企业、科研机构以及各类组织日常运营的核心环节。数据来源广泛，格式多样，常见的数据格式包括XML（可扩展标记语言）和JSON&a…...

编程日记 2025/1/25 22:55:32

智能体0门槛开发

分享一个智能体开发流程。 2025 年啊，好多专家还有行业报告都觉得这是智能体（AI Agent）应用的头一年。相关的应用在商业、工业、消费等好些领域都到了关键的时候，这意味着从实验室走向大规模实际应用的重要转变。而且呢&#xff0…...

编程日记 2025/1/25 22:53:30

ssh密钥登录GitHub时一直提示“Error: Permission denied (publickey)”

起因环境：Windows10 背景：之前就是按照官方说明创建个rsa密钥，在git后台添加上，就行了，近期怎么添加怎么失败，总是“Error: Permission denied (publickey)”的提示！ 尝试各种尝试&#xf…...

编程日记 2025/1/25 22:52:29

mapbox加载geojson，鼠标移入改变颜色，设置样式以及vue中的使用

全国地图json数据下载地址目录 html加载全部代码方式一：使用html方式加载geojson 1. 初始化地图 2. 加载geojson数据设置geojson图层样式，设置type加载数据类型设置线条鼠标移入改变颜色，设置图层属性，此处是fill-extru…...

编程日记 2025/1/25 22:47:24

考研机试题：打印日期

描述给出年分m和一年中的第n天，算出第n天是几月几号。输入描述: 输入包括两个整数y(1<y<3000)，n(1<n<366)。输出描述: 可能有多组测试数据，对于每组数据， 按 yyyy-mm-dd的格式将输入中对应的日期打印出来。 …...

编程日记 2025/1/25 22:46:23

OpenHarmonyOS 3.2 编译生成的hap和app文件的名称如何配置追加版本号？

找了一圈发现官方的文档都是最新的，3.2很多API都不支持，比如获取OhosAppContext，通过OhosAppContext来获取应用版本号，最终是通过读取app.json5的文件内容来读取版本号，最终修改entry下的hvigorfile.ts如下&#xff0c…...

编程日记 2025/1/25 22:45:21

【openwrt】openwrt odhcpd配置介绍

odhcpd odhcpd是一个嵌入式DHCP/DHCPv6/RA服务器和NDP中继的进程，odhcpd是一个守护进程，用于服务和中继IP管理协议，以配置客户端和下游路由器。它试图遵循IPv6家用路由器的RFC 6204要求。odhcpd为DHCP、RA、无状态SLAAC和有状态DHCPv6、前缀委派提供服务器服务，并可用于在没…...

编程日记 2025/1/25 22:44:20

基于神经网络的视频编码NNVC（1）：帧内预测

在H.266/VVC发布后，基于传统编码框架提升压缩率越来越难，随着深度学习的发展，研究人员开始尝试将神经网络引入编码器。为此，JVET工作组在2020年成立AHG11小组来专门进行基于神经网络的视频编码的研究。为了方便研究，工…...

编程日记 2025/1/25 22:43:18

相关文章：