【Cursor教程】探索Cursor颠覆编程体验的创新工具！教程+示例+快捷键

ChatGPT-千鑫

已于 2024-10-10 15:46:20 修改

阅读量5.8k

点赞数 19

分类专栏： AI领域文章标签： cursor 人工智能开发语言 AI编程 AI工作流 ai codemoss能用AI

于 2024-10-10 15:40:39 首次发布

本文链接：https://blog.csdn.net/zhouzongxin94/article/details/142822547

版权

文章目录

在当今技术飞速发展的时代，编程工具的选择对开发者的工作效率和体验至关重要。最近，Cursor这一工具引起了广泛的关注。起初，我以为它只是一个普通的代码编辑器，增加了一些基于大型语言模型（LLM）的辅助功能。然而，当我亲自测试后，发现它的潜力远超我的预期！仅用不到5分钟，我就通过自然语言指令完成了一个支付功能页面的构建（文末附有详细制作过程）。这让我不禁思考，李彦宏所提到的“人人都是开发者”的时代，是否真的已经来临？
在这里插入图片描述

Cursor的全新定义

Cursor 是一款集成了多种先进模型（如Claude-3.5-Sonnet、GPT-4等）的智能编辑器。值得注意的是，Cursor在国内也可以直接使用，并且支持多种编程语言，包括Python、Java、C#等。此外，它可以在多个平台上安装，极大地提升了开发者的灵活性。Cursor不仅限于代码编写，还支持聊天、写作等多种功能，全面提升了开发者的工作效率和体验。

Cursor在大型语言模型的加持下，类似于GitHub的Copilot和百度的文心快码，但它的独特之处在于其用户友好的界面和强大的功能集成。Cursor的主要亮点包括：

完美继承VS Code的强大功能与界面：
- Cursor几乎完全复刻了VS Code的用户界面，并深度集成了如GPT等大型模型，能够无缝融入包括IntelliJ IDEA、Visual Studio Code和GitHub在内的主流开发环境。
轻量级设计，启动迅速，提升编程效率：
- Cursor的轻量级设计使其启动速度极快，能够显著提升编程效率，减少开发者的等待时间。

目前，Cursor的开发公司Anysphere已经吸引了OpenAI、Midjourney、Perplexity等知名企业作为客户，进一步证明了Cursor产品的价值和实用性。同时，它也受到了全球开发者的广泛喜爱，赢得了众多好评。

Cursor的灵活订阅模式

这个在之前的文章讲过，在这里：【前端必读】如何免费无限使用Cursor：AI编程工具的终极指南！

使用Cursor轻松创建支付页面

接下来，我将分享如何通过Cursor快速创建一个支付页面的具体步骤：

按下快捷键 Ctrl + K 唤醒编辑功能。

输入以下自然语言指令：

# 创建一个简单的支付页面，包括姓名、手机号、支付方式、支付金额，支付方式包含微信支付和支付宝支付，简洁、高级，用乔布斯的风格设计

在这里插入图片描述

生成代码：
- Cursor将自动生成支付页面的代码。


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面</title>
    <style>
        body {
     
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f7;
            color: #1d1d1f;
        }

        .payment-form {
     
            background-color: white;
            padding: 40px;
            border-radius: 18px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            width: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h2 {
     
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
        }

        form {
     
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        input,
        select,
        button {