笔记 RSS feed

• 新手入门后端必要概念+最佳实践

  2025年11月14日 16:10

  什么是后端？

  后端的概念

  

  后端是用户看不见的应用“幕后引擎”，负责处理业务逻辑、数据存储、安全验证及资源调度。简单来说，后端是支撑前端运行的“大脑”和“数据库”，确保用户的请求能被正确处理并返回结果。

  • 前端：关注用户界面与交互（浏览器、小程序中运行）。

  • 后端：关注数据处理、数据存储、安全性和业务逻辑（服务器上运行）。

  • 协作关系：前端通过API调用后端服务，后端返回JSON/XML格式数据供前端展示。

  后端的编程语言？

  后端的编程语言相比前端只有JavaScript来说要丰富很多，例如Python、Java、 Golang,、PHP、C#等.

  但是对于新手而言，特别是AI时代学习开发，那么我只推荐学习两个编程语言：

  JavaScript和Python.

  如果只推荐一个，那就一定是JavaScript。

  JavaScript (Node.js)

  

  •特点：基于事件驱动的异步编程，适合高并发场景，可复用前端的JavaScript的工具。

  • 应用场景：实时应用（聊天室）、API 服务、微服务。

  • 常用框架：

  。Express.js：轻量灵活，生态丰富。

  。NestJS：企业级框架，支持 TypeScript 和模块化开发。

  。Koa.js：更现代的 Express 替代品。

  Python

  

  • 特点：语法简洁易读，适合快速开发，拥有丰富的库和框架。

  • 应用场景：Web 开发、数据分析、人工智能、自动化脚本。

  • 常用框架：

  。Diango：全功能 Web 框架（适合中大型项目）。

  。Flask：轻量级框架（适合小型项目或API开发）

  。 FastAPI：高性能 API 框架（支持异步编程）。

  新手需要掌握的4个后端概念

  API（应用程序接口）

  API（应用程序编程接口）是一组预先定义的规则和工具，让不同的软件程序能够相互通信和交换数据。

  打个比方：

  • API就像餐厅的服务员-你（客户端）不需要直接跑到厨房（服务器）去点菜和取餐，而是通过服务员（API）来传达你的需求和获取结果

  • 或者可以把它想象成插座 -你不需要了解电力是如何产生和传输的，只要遵循插座的规格（API规则）就能使用电力

  现在的各个大模型都是有提供API调用的，例如DeepSeek开放平台就提供了API相关的调用文档。

  

  API的主要用途

  1. 让应用程序能调用其他程序的功能

  2. 隐藏复杂的实现细节

  3. 标准化不同程序之间的数据交换

  服务器（Server）

  如果我们单独说服务器的时候，一般是指托管前后端代码和数据的远程计算机（硬件）， 7x24小时响应请求。但是现在其实基本上不会有人购买一台服务器，特别是对于我们教程的读者。

  但当我们说到Server的时候，其实有不同的Server的概念，容易混淆的是云服务器和web 服务器的概念。并且我也来解释一下我们的web应用程序和这两者之间的关系！

  1. 云服务器 （Cloud Server）

  

  当我们现在说买一台服务器的时候，99%的场景是指去阿里云或者腾讯云上购买一台云服务器，也就是Cloud server的概念（图片是阿里云的海外官网，为了让大家看到Cloud Server).

  让我们切到国内版本的阿里云可能大家看得更清楚，这边我们其实有非常多的服务器可以选择，那对于我们的学员来说，大部分场景只要选择轻量应用服务器即可。

  

  如果购买云服务器之后，你可以简单的理解为：你购买了一台远程的7x24不关机的计算机的一部分计算资源。不用去关心它是什么VM或者容器的概念。

  2. Web服务器 （HTTP Web Server）

  当我们提到Web服务器的时候，其实是指的安装在服务器上的软件，例如Nginx这样的软件。他们全程是HTTP Web Server。

  这类软件最核心的功能是帮助你处理HTTP请求和一些静态的资源，用户发过来的请求会首先经过HTTP Web Server，然后再到我们的应用程序。当然，我们应用程序处理之后的数据也会经过HTTP Web Server再返回给用户。

  

  3. Web应用程序

  理解了前面两个Server之后，我们再来看我们为什么需要云服务器？

  因为我们需要一台服务器来托管我们的Web应用程序。通过下面这张图你就能够理解云服务器、Web服务器和我们的Web应用程序之间的关系了。

  

  数据库 （Database）

  

  我相信数据库的概念，大家或多或少都能理解。

  如果你实在没有接触过数据库，那你可以理解为这是在服务器上放的Excel表，这些表中保存了你项目的所有数据。当你需要数据的时候，你的应用程序会从这个Excel表上获取数据。

  • 数据库两大分类：关系型数据库和NoSQL数据库

  • ORM工具：通过代码操作数据库（如Prisma、Sequelize），避免手写SQL。

  对象存储 （Object Storage）

  

  对象存储的概念可能对大家很陌生，那我来问几个问题：

  1. 你有没有想过你平时上传的照片和视频是放在哪儿的？是放到数据库里吗？

  2. 你有没有想过怎么样才能让图片可以通过链接访问？

  是的，对象存储就是用来解决这两个问题的！

  我们平时上传的照片和视频一般都是放在对象存储里面的。一旦放在对象存储里面，它就能够通过链接进行访问。照片和视频这种大文件我们都不会用数据库存储，而是一般会在数据库里面存储对象存储返回的链接url地址。

  Al 时代新手开发后端的最佳实践

  1. 快速构建后端基础服务

  

  对于新手而言，我强烈建议你使用Supabase、Cloudbase这些PaaS产品。这些产品提供 “一站式”后端解决方案，涵盖用户认证、数据库、数据存储以及云函数等功能。

  • 零运维：无需搭建复杂服务器环境，后台服务由云厂商自动管理。

  • 极速集成：通过 SDK 和 API 调用，可以迅速实现用户系统、实时数据同步和文件存储

  • 扩展灵活：随着项目增长，可以逐步定制或迁移部分服务（例如从云数据库迁移到更专业的数据库服务）。

  2. 前后端一体化开发

  

  3. 无需自购服务器，轻松部署

  

  部署平台：Vercel / Zeabur

  • Serverless 部署：自动管理服务器资源，无需手动配置和维护服务器，减少运维负担与成本。

  • 自动化集成：支持与 Git 仓库集成，每次代码提交后自动触发构建和部署。

  • 弹性伸缩：根据流量实现自动扩容或缩容，确保应用在高并发下依旧响应迅速。

  • 全球 CDN 加速：边缘节点部署，让用户在不同地区都能迅速访问你的应用。

  后端的安全性

  最后我需要强调一下后端的安全性。后端安全性是确保系统不被攻击、数据不被泄露的核心保障。即使前端有基础防护（如输入校验），真正的安全防线必须由后端构建。如果你是通过AI编程的新手最起码要确保：

  1. 敏感信息保护：API Key、密钥与凭证一定是放在后端，泄露可能会再造成财产损失。

  2. 数据泄露：尽量不要去手写SQL，而是使用ORM框架或者数据库服务商提供的sdk，他们会自动转义危险字符

  3. 支付逻辑：如果你的后端具有支付的逻辑，如果是AI写的，那么最好找相关有经验的程序员看一下。如果有漏洞也可能造成财产损失！

• 新手AI前端编程核心概念 + 最佳实践

  2025年11月14日 14:58

  什么是前端？

  这一篇教程我们来理解什么是前端？

  这篇教程不会讲任何关于前端编程语言相关的语法知识，我们只是讲一些核心的前端概念，如果不了解这些概念，那么你在使用相关的工具的时候可能会踩很多坑

  例如如果你不知道什么是样式，什么是框架和组件，那么你可能很难和AI沟通， 也不明白AI在说些什么。但是一旦你了解了这些相关的概念。那么就能更好地使用AI，提出更精准的问题！

  简单的说：前端就是你在浏览器中直接看到并与之互动的部分，比如按钮、图片、文字和动画等。它主要由HTML、CSS和JavaScript构成，负责将网站或应用的内容展示得漂亮、布局合理，并且响应你的操作，与后端的数据和业务逻辑进行交互。

  前端在哪些应用场景中出现？

  1. 网站

  

  网站是最常见的前端应用。无论是企业官网、电商平台还是博客论坛，前端都负责页面的结构、样式以及与用户的互动。当你在浏览器中输入网址访问网站时，实际上就加载了前端代码，这些代码决定了页面的布局和动态效果。

  2. 小程序

  

  小程序是国内的一种特的前端展示，例如微信小程序、支付宝小程序等。这些应用同样运行在专用的“浏览器”或容器中。因为开发语言和展示方式与网站H5类似，也归属于前端范畴。

  3. 浏览器插件

  

  浏览器插件也是前端技术的一个重要场景。它们直接嵌入到浏览器中，为用户提供额外的功能和自定义体验，比如广告拦截、主题色修改以及各种工具扩展等。

  客户端vs前端？

  那么大家可能会想，我们平时开发手机上的应用。例如iOS应用和安卓应用那是属于前端吗？

  这边直接给大家一个结论：它我们平时说前端只是指网站、小程序、浏览器插件的开发。

  iOS应用和安卓应用一般我们叫它客户端。

  详细的区分主要是按照所使用的技术进行区分的，还有更多端的说法可参考：

  •前端：专指那些运行在浏览器或小程序容器中的代码，即网站、小程序、浏览器插件等，并且主要依赖于HTML、CSS和JavaScript这这三大技术栈。

  • 客户端：iOS/Android/鸿蒙这些平台开发的应用是原生客户端应用，主要使用 Swift/Objective-C （iOS）或 Kotlin/Java （Android）进行开发，虽然它们也涉及界面，但通常不属于前端的范畴。

  • 桌面端：Windows或者MacOS上的应用开发，我们叫它桌面端。

  •大前端：同时包含前端+客户端+桌面端，你可以说它是大前端

  小提示：理论上来说，你学会了前端的3个技术（HTML/CSS/JavaScript）之后， 可以客户端和桌面端。

  前端最重要的三个技术

  在前端开发中，有三项基础技术是每个开发者必须掌握的：HTML、CSS和JavaScript。

  它们分别承担着不同的角色，协同构成了现代前端开发的核心。虽然目前AI可以很方便地帮我们编写代码，但是你最起码得清楚它们分别是什么！

  HTML— 网站的骨架

  HTML（超文本标记语言，HyperText Markup Language）负责定义网页的基本结构和内容。你可以把 HTML想象成是网页的“骨架”，它提供了所有内容的基本框架，比如文本、图片、链接、按钮等。

  • 基本概念：使用各种标签来描述网页的不同部分。

  • 主要作用：定义网页所有的元素和结构，帮助浏览器解析并显示页面内容。

  • 示例：

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>我的第一个网页</title>
    </head>
    <body>
      <h1>欢迎来到我的网站</h1>
      <p>这里是一个简单的HTML示例。</p>
    </body>
  </html>

  CSS一让网页更美观

  CSS（层叠样式表，Cascading Style Sheets）主要用于为HTML结构添加样式。可以把 css 看作是给网页搭配衣服，它使得静态的HTML内容变得美观和有吸引力，同时也负责页面的布局和响应式设计。

  •基本概念：通过选择器（如标签选择器、类选择器、ID选择器）为HTML中的元素设置颜色、字体、间距、布局以及动画效果等一系列样式，CSS的代码写在style标签中。

  •主要作用：美化网页，让网站在各种设备上都能星现一致而吸引人的视觉效果。

  •示例：

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>美化网页的示例</title>
      <style>
        body {
          background-color: #f5f5f5;
          font-family: Arial, sans-serif;
          margin: 20px;
        }
        h1 {
          color: #333;
        }
        p {
          color: #666;
          line-height: 1.6;
        }
      </style>
    </head>
    <body>
      <h1>欢迎来到我的网站</h1>
      <p>这是一个使用CSS美化的网页示例。</p>
    </body>
  </html>

  JavaScript — 给网页加上交互

  JavaScript 是一门编程语言，它使得网页具备交互性和动态效果。通过 JavaScript，能够响应用户点击、输入、滚动等行为，使网页不再是静态的，而是充满生命力和互动性。

  • 基本概念：JavaScript 是一门功能强大的脚本语言，支持变量、函数、条件语句、 循环以及各种数据结构和编程范式。JavaScript的代码写在＜script>标签中。

  • 主要作用：提供动态效果和交互功能，如表单校验、数据实时加载、动画效果等，以及与后端服务器交互数据。

  •示例：

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>动态网页示例</title>
    </head>
    <body>
      <button id="myButton">点击我</button>
      <script>
        document.getElementById('myButton').addEventListener('click', function() {
          alert('按钮被点击了！');
        });
      </script>
    </body>
  </html>

  扩展说明：

  除了在浏览器中运行外，借助 Node.js,JavaScript 还可以用于后端开发，实现全栈 JavaScript 开发。所以从理论上来说，学习了JavaScript，你可以不用学习其他编程语言了。

  前端最重要的两个网站：GitHub & npm

  在前端开发中，GitHub 和 npm 是两个必不可少的平台。它们不仅是新手探索前端领域的重要入口，更是专业开发者构建、分享和复用代码的核心基地。尤其在Al 时代，通过这两个平台，我们可以更高效、更合理地找到自己需要的模板、框架、SDK 以及库，从而加速应用的开发。

  GitHub — 开源代码集散地

  什么是 GitHub？

  

  GitHub 是目前世界上最大的代码托管和协作平台。无论你是刚入门的小白，还是经验丰富的开发者，都可以在GitHub上找到成千上万的开源项目和资源。

  GitHub 的主要作用

  • 分享与协作：开发者可以在GitHub上托管代码，与世界各地的程序员共同协作，不断迭代和完善项目。

  • 模板和 boilerplate 资源：很多优秀的项目早已整理出标准化的模板或脚手架 （boilerplate），帮助新手从零开始构建网站或应用。

  •学习和启发：通过浏览和参与开源项目，你可以学习到先进的开发理念、架构设计以及实践经验。

  GitHub 的优势

  • 社区力量：全球活跃的开发者社区不断为项目贡献代码、文档和经验。

  • 代码安全和版本管理：借助 GitHub 的版本控制系统，开发者可以跟踪代码变更，轻松管理更新和问题修复。

  • 工具生态：Github拥有很多的工具生态，例如你如果把你的代码在Github托管，可以使用Vercel轻松部署项目。

  npm —前端库与依赖管理的仓库

  

  什么是 npm？

  npm（Node Package Manager）不仅是Node.js 的包管理工具，更是全世界最大的 JavaScript 库和工具的仓库。通过 npm，我们可以快速下载并集成各种功能完善的工具库和框架，从而大大降低开发门槛。

  npm 的主要作用

  • 依赖管理：帮助开发者管理项目中各种第三方库和模块，确保版本一致和依赖正确。

  • 丰富的资源库：不仅包含前端框架（如 React、 Vue 等）的官方包，也囊括了许多辅助开发的小工具和插件。

  • 快速原型开发：通过 npm，可以轻松集成已有的解决方案，加速从想法到产品的转换。

  npm 的优势

  • 便捷的安装与更新：借助 npm 命令，可以快速安装所需的包，并自动处理包之间的依赖关系。常用的两个命令如下：

  npm install：安装项目的依赖

  npm run dev：运行起来项目

  • 生态系统完善：依托于庞大的社区和不断更新的资源库，无论你需要UI 组件、数据处理工具还是开发辅助工具，都可以在 npm 中找到。

  用好AI编写前端必备的4个概念

  在 AI 时代，编程更多的是将现有的优秀资源合理地进行组合，而不是从零开始写代码。

  对于没有编程基础的新手而言，掌握这4个概念能够让你更好的和AI进行沟通，并且从 Github和npm上找到和使用你想要的工具。

  1. 框架（Framework）

  框架是一种预先定义好的开发结构，它为你构建应用提供了基础模板和运行规则。常见的前端框架有 React/Next.js 以及 Vue/Nuxt.js。

  • Nextjs（最为推荐的框架，AI友好＋生态丰富合）

  

  • Nuxt.js（较为推荐，Vue的语法对新手友好）

  

  在使用框架时，通常需要关注以下两个重要概念：

  •页面（Page）页面代表应用中的一个独立界面或路由。例如，一个电商网站可能会有首页、产品详情页和购物车等不同页面。框架通常内置路由管理，帮助你轻松管理各个页面之间的导航和状态。

  • 组件（Component）组件是页面的基本构建单元，是可重复使用的UJI 模块。无论是按钮、输入框，还是整个导航栏，都可以被看作组件。组件化结构不仅提高了开发效率，还使得代码更易维护和扩展。

  2. 模板 （Template/Boilerplate）

  

  模板或脚手架是一份预先配置好的框架代码+业务代码。它通常包含了项目的目录结构、配置文件、常用依赖以及某个业务的基础代码。比如你可以选取一个博客的模板修改成为自己的博客，或者可以选择一个导航站的模板修改成为自己的导航站。

  Github上有许多开源免费的模板，Next.js和Nuxt.js官方也有很多免费的模板：

  • Next.js Template

  • Nuxt.js Template

  模板的作用：

  •快速建立项目，节省环境搭建和配置的时间。

  • 提供最佳实践和统一的编码风格。

  • 上手就可以用的UI样式。

  •降低新手的学习曲线，让你专注于业务逻辑而不是底层配置。

  3. SDK

  SDK （Software Development Kit，软件开发工具包）是一组用于构建应用的工具和资源的集合。一个 SDK 通常包含：

  • API（应用程序接口）提供标准化的调用接口，让你可以方便地使用某项服务或技术，而不需关心底层的买现细节。

  • 文档和示例代码帮助你了解如何集成和使用这些 API 以及最佳实践。

  • 工具和库用于简化开发流程，比如调试工具、测试环境和代码生成器。

  

  在 AI 开发中的作用：目前很多 AI服务都提供了专门的SDK。通过集成SDK，你可以快速为你的应用加上AI能力，而不必从零开发复杂的算法和服务。例如OpenAI就提供了 Node.js和Python的SDK.

  4. 库（Library）

  库是一组预先编写好的、可重用的代码集合，用于解决特定问题。与框架不同，库通常不规定整个项目的结构，而是专注于提供某项功能或算法的实现。

  作用：

  • 简化代码：通过调用库中的函数，你可以轻松实现复杂的功能。

  • 提高效率：避免重复造轮子，利用别人已经写好的、经过检验的代码。

  • 灵活性高：你可以根据需要选择和替换不同的库，而无需受到整个项目框架的限制。

  

  举例：在前端开发中，可能会使用图形库（例如echarts.js）来实现数据可视化，或使用日期处理库（moment.js）来简化时间计算。选择合适的库，可以让你的开发工作更专注于业务需求，而不必关注基础逻辑的实现。

  AI时代新手开发的最佳实践

  在AI时代，快速、高效地搭建应用程序已成为大势所趋。对于新手而言，最聪明的做法就是从已有的框架或模板开始，而不是从零开始构建项目。下面介绍一种实践流程，可以大幅提升开发效率和降低入门难度。

  1. 选择合适的框架或模板

  • 直接获取模板

  

  如果你已经确定了你的开发方向，可以直接访问像 Next.js 或 Nuxt.js 这样的框架官网。

  这些官网通常提供经过整理的项目模板，让你能够一键下载并开始开发。此外，你也可以在 GitHub 上搜索免费的 template 或 boilerplate。这些模板经过社区验证，通常不仅包含了基础项目结构，还整合了最佳实践和常见功能。

  • 购买付费模板

  

  如果开源模板满足不了你的复杂需求，也可以考虑购买商业模板。付费模板一般会提供更专业的设计、更完善的文档以及长期维护支持，适用于中大型项目的快速启动。https://saasboilerplates.dev/这个网站有许多优秀的付费模板。

  2. bolt.new自定义模板（现有模板不满足需求时）

  有时，无论是免费模板还是付费模板，都可能无法完美匹配你的具体项目需求，而且因为可能模板太复杂，让你修改的成本很高。这个时候推荐使用一个非常实用的工具 bolt.new.

  

  使用 bolt.new bolt.new 支持通过自然语言对话生成一套自定义模板。你只需告诉它你的需求，例如你希望开发一个瑜伽老师的个人网站。bolt.new 就可以根据描述自动生成满足需求的项目起始代码。这一方式不仅省去了繁琐的环境配置过程，还能让最终的模板更加贴合项目本身。

  3. 利用 Cursor 搭建和开发项目

  

  完成模板选择或生成后，接下来的工作重点就是利用 Cursor 进行项目开发：

  • Cursor 的作用 Cursor 是一个智能开发工具，可以帮助你快速编写、调试和修改代码。借助 Cursor，你可以在模板基础上加入个性化内容、扩展功能或进行后续优化， 同时享受 AI 智能补全和提示带来的便利。

  • 开发流程简述:

  。获取模板：先从官网、GitHub 或bolt.new 获取最适合的模板。

  。导入模板：在 Cursor 中打开模板项目，并基于模板开始编写业务逻辑代码。

  。智能迭代：借助 Cursor 的智能功能，不断迭代和完善项目，快速添加新组件、调试代码以及集成其他库和 SDK。

  在 AI 时代，新手开发者应优先选择现成的模板或框架（如 Next.js、Nuxt.js）， 可以先访问官网或在 GitHub上找到免费的模板。如果现有资源无法满足需求， 使用 bolt.new 通过自然语言定制模板是一个非常便捷的选择。而利用 Cursor 进行代码的编写与送代，则能让你充分发挥 AI工具的优势。

  这种流程不仅节省了大量重复配置的时间，还保证了代码的规范和质量，是在快速迭代、灵活应对需求变化的现代开发中，最理想的实践方式。通过这种最佳实践，新手能迅速上手，从而更专注地实现创新功能和高质量应用。

• 开发环境搭建

  2025年11月14日 12:28

  1.2.1 安装 Git

  

  什么是Git？

  git官网地址：https://git-scm.com/

  Git是当今最流行的版本控制系统，尤其在AI辅助开发场景下，Git的作用更加突出。它就像是我们写代码时的“时光机器”，能够记录代码的每一次变更，让我们在AI修改代码出现问题时，随时可以回到之前的版本。

  为什么在Al开发中Git尤其重要？

  1. 实验保护

  a. Al可能生成多个版本的解决方案

  b. 通过分支功能安全地测试不同方案

  c. 随时可以回退到稳定版本

  2. 变更追踪

  a. 清晰记录AI修改的内容

  b. 方便对比前后代码的差异

  c.帮助理解AI的改动逻辑

  检查自己的电脑是否有安装git

  先检查自己的电脑是否默认有git，打开自己的Terminal，输入以下命令：

  git --version

  如果有像我下图一样打印出东西，那么就说明你电脑中有git，可以不用安装了

  

  安装步骤

  Windows系统

  1. 访问Git官网 （https://git-scm.com）

  2. 下载Windows版本的安装程序

  3.运行安装程序，使用默认选项即可

  4. 安装完成后，打开命令提示符验证：

  git --version

  MacOS系统

  1. 方式1：使用包管理器Homebrew安装（推荐）：

  brew install git

  2. 方式2：通过命令行工具自动安装：

  xcode-select --install

  验证安装

  完成安装后，可以通过以下命令验证：

  git --version

  基础配置

  安装完成后，需要进行一些基本配置：

  git config --global user.name "你的名字"
  git config --global user.email "你的邮箱"

  注意事项：

  1. 每次让AI修改重要代码前，确保当前代码已提交

  2. 给每个AlI改动添加清晰的提交信息，方便追踪

  3. 重要的实验性改动建议创建新分支

  4.定期推送到远程仓库保证代码安全

  通过以上配置和使用建议，你就可以安全地进行AI辅助开发，让Git成为你的保护伞，无需担心A改动带来的风险。记住，好的版本控制习惯能让你的AI开发之旅更加顺畅。

  1.2.2 安装 Node.js

  

  什么是Node.js？

  Javascript这门语言是网页开发、小程序开发的必备语言。并且你甚至可以用它来开发 App和后端。是新手入门AI应用最建议学习的语言。

  在AI应用开发中，我们需要Node.js来运行我们的代码，并通过npm（Node包管理器）安装各种AI相关的工具包。

  为什么Al开发需要安装Node.js？

  1. 运行环境

  a. 运行我们的AI应用代码

  b. 支持前端和后端开发

  c. 处理与AI服务的通信

  2. 包管理

  a. 通过npm安装AI相关的库

  b. 管理项目依赖

  C. 获取各种开发工具

  安装步骤

  Windows系统

  1. 访问Node.js官网 （https://nodejs.org）

  2. 下载”LTS”版本（长期支持版，更稳定）

  3. 运行下载的安装程序

  4.全程点击”下一步”使用默认设置即可

  5. 安装完成后，打开命令提示符（按Win+R，输入cmd）验证：

  node --version
  npm --version

  MacOS系统

  1. 访问Node.js官网 （https://nodejs.org）

  2. 下载macOS版本的”LTS”安装包

  3.双击打开并安装

  4. 打开终端（Terminal） 验证安装：

  node --version
  npm --version

  简单测试

  你可以通过以下步骤测试Node.js是否正常工作：

  1. 打开终端或命令提示符

  2. 输入 node 进入Node.js环境

  3. 输入以下代码测试：

  console.log('Hello, AI Developer!')

  按Ctrl+C两次退出Node.js环境

  注意事项

  1. 安装时需要管理员权限

  2. 如果安装后命令无效，可能需要重启电脑

  3.建议安装LTS（长期支持）版本，而不是最新版

  4. 如果之前安装过Node.js，建议先卸载旧版本

  完成以上步骤后，你就成功安装了Node.js，为接下来的AI应用开发做好了准备。Node.js 将帮助我们运行代码，而npm则让我们能够使用丰富的AI开发工具包。

  1.2.3 安装Python

  

  什么是 Python

  Python是一种可以让你快速工作的编程语言，就像我们日常交流用的语言（如中文、英文）一样，

  Python 就是其中一种简单好用的沟通方式，让计算机能理解我们的指令并完成任务。

  为什么 AI开发需要安装Python？

  1. 运行环境

  a. 运行我们的AI应用代码

  b. 支持后端开发

  c.处理与前端的通信

  2.包管理

  a. 通过pip安装应用的库

  b. 管理项目依赖

  c. 获取各种开发工具

  安装步骤

  Windows系统

  1. 访问 https://www.python.org/downloads/windows/

  2. 选择Stable Releases（稳定版）下面的安装包

  3. 下载完成后，双击安装包，按照提示进行安装。

  4. 在安装过程中，勾选“Add Python to PATH” 选项，这将使 Python 可以在命令行中直接运行。

  5. 完成安装后，在“Start” 菜单中搜索“Python”，打开 Python Shell 进行测试。

  MacOS系统

  Tips： 最新的Macos一般都自带Python，无需安装只需执行第5步查看即可

  1. 访问https://www.python.org/downloads/macos/

  2. 选择Stable Releases（稳定版）下面的安装包

  3. 下载完成后，双击安装包，按照提示进行安装。

  4. 安装完成后，打开“Terminal”应用程序。

  5.输入 python3 -version，确认是否安装成功，如果安装成功会显示 Python 的版本号。

  Linux 平台

  1.大多数 Linux 发行版已经预装了 Python，但可能需要更新或升级到最新版本。

  2. 打开终端，输入以下命令更新系统软件列表：

  a. 基于 Red Hat 的系统（如 Fedora） sudo yum update

  b. 基于 Debian 的系统（如 Ubuntu） sudo apt-get update

  3. 输入以下命令安装 Python：

  a. 基于 Red Hat 的系统： sudo yum install python3

  b. 基于 Debian 的系统： sudo apt-get install python3

  4.安装完成后，输入 python3 —version，确认是否安装成功。

  简单测试

  1. 打开终端或命令提示符窗口。

  2. 输入Python并敲回车

  3. 输入 print(“Hello, World!”)

  注意事项

  1.上面提到过pip是Python的包管理，现在最新版都默认安装了不需要手动安装。 如何验证？

  输入 pip3 -version

  2. 建议安装稳定版（Stable Releases）

  完成以上步骤后，你就成功安装了Python，为接下来的AI应用开发做好了准备。Python将帮助我们运行代码，而pip则让我们能够使用丰富的AI开发工具包。

• Vercel教程：免费部署你的网站项目

  2025年11月11日 13:00

  1. 项目预览

  本期课程我们会带着大家用这样一个项目跑通Vercel的部署。Vercel部署项目非常简单， 基本就是没有任何门槛。

  在在我们之前的多个项目部署中，也有涉及到如何使用Vercel部署的基本流程，但是这是一期专题项目，除了跑通Vercel的部署流程之外，我们还会讲到：

  

  2. 初始化项目

  2.1 下载项目

  • 下载我们为本项目准备的课程源代码，用Cursor打开：

  源代码下载链接

  

  • 复制项目根目录的 .env.example，修改成 .env

  .env:

  NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
  NEXT_PUBLIC_SUPABASE_ANON_KEY=public-anon-key
  SUPABASE_SERVICE_ROLE_KEY=service-role-key

  • 输入以下命令，安装项目依赖：

  pnpm install

  2.2 初始化supabase

  首先创建一个新的supabase项目，点击进入【SQL Editor】 当中。

  

  • 输入以下SQL，创建数据表

  -- Enable UUID generation utilities
  create extension if not exists "pgcrypto";
  
  -- Pricing plans master data
  create table if not exists pricing_plans (
    id uuid primary key default gen_random_uuid(),
    slug text not null unique,
    name text not null,
    description text,
    monthly_price numeric(10,2) not null,
    annual_price numeric(10,2) not null,
    currency_code text not null default 'USD',
    features text[] not null default '{}'::text[],
    feature_heading text not null default 'Get started today:',
    cta_label text not null,
    cta_href text,
    highlight boolean not null default false,
    badge_label text,
    button_tone text not null default 'neutral',
    sort_order integer not null default 0,
    created_at timestamptz not null default now(),
    updated_at timestamptz not null default now()
  );
  
  create index if not exists pricing_plans_sort_order_idx on pricing_plans(sort_order);
  
  create or replace function pricing_plans_set_updated_at()
  returns trigger as $$
  begin
    new.updated_at = now();
    return new;
  end;
  $$ language plpgsql;
  
  drop trigger if exists pricing_plans_set_updated_at on pricing_plans;
  create trigger pricing_plans_set_updated_at
  before update on pricing_plans
  for each row
  execute function pricing_plans_set_updated_at();

  • 执行成功后，再输入以下SQL，给表初始化数据：

  insert into pricing_plans (
    slug,
    name,
    description,
    monthly_price,
    annual_price,
    currency_code,
    features,
    feature_heading,
    cta_label,
    cta_href,
    highlight,
    badge_label,
    button_tone,
    sort_order
  ) values
    (
      'free',
      'Free',
      'Perfect for individuals starting their journey.',
      0,
      0,
      'USD',
      ARRAY[
        'Real-time code suggestions',
        'Basic integration logos',
        'Single MCP server connection',
        'Up to 2 AI coding agents',
        'Vercel deployments with Pointer branding'
      ]::text[],
      'Get started today:',
      'Get Started',
      '/auth?view=signup',
      false,
      null,
      'neutral',
      1
    ),
    (
      'pro',
      'Pro',
      'Ideal for professionals.',
      20,
      16,
      'USD',
      ARRAY[
        'Enhanced real-time previews',
        'Unlimited integrations with custom logos',
        'Multiple MCP server connections',
        'Up to 10 concurrent AI coding agents',
        'Collaborative coding with team chat',
        'Advanced version control integrations',
        'Priority email and chat support'
      ]::text[],
      'Everything in Free +',
      'Join now',
      '/auth?view=signup',
      true,
      'Popular',
      'inverted',
      2
    ),
    (
      'ultra',
      'Ultra',
      'Tailored solutions for teams.',
      200,
      160,
      'USD',
      ARRAY[
        'Dedicated account support',
        'Unlimited MCP server clusters',
        'Unlimited AI coding agents',
        'Enterprise-grade security and compliance',
        'Priority deployments and SLA guarantees'
      ]::text[],
      'Everything in Pro +',
      'Talk to Sales',
      'mailto:sales@example.com',
      false,
      null,
      'secondary',
      3
    )
  on conflict (slug) do update set
    name = excluded.name,
    description = excluded.description,
    monthly_price = excluded.monthly_price,
    annual_price = excluded.annual_price,
    currency_code = excluded.currency_code,
    features = excluded.features,
    feature_heading = excluded.feature_heading,
    cta_label = excluded.cta_label,
    cta_href = excluded.cta_href,
    highlight = excluded.highlight,
    badge_label = excluded.badge_label,
    button_tone = excluded.button_tone,
    sort_order = excluded.sort_order,
    updated_at = now();

  2.3 运行项目

  复制supabase的环境变量，添加到 .env 中

  NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
  NEXT_PUBLIC_SUPABASE_ANON_KEY=public-anon-key
  SUPABASE_SERVICE_ROLE_KEY=service-role-key

  然后回到Cursor中，在终端中输入一下命令，运行起来项目

  终端：

  pnpm run dev

  

  目前你的项目就成功的运行起来了。

  2.4 提交到Github

  • 在Cursor的git管理中，完成以下步骤

  。初始化git仓库

  。提交项目，输入提交的内容： init project （提交内容可以自选）

  • 然后接下来到你的Github中，创建对应的远程仓库。

  

  • 复制这一行语句，粘贴到你的Cursor的终端中

  

  • 部署成功后，刷新Github的该页面，你就能看到代码提交上去了。

  

  3. 部署到Vercel

  3.1 部署项目到Vercel

  1. 本地构建

  

  首先需要说明，所有的项目部署上线，其实是分为两步的：

  1. 构建：构建生成代码，主要有代码编译过程、压缩等

  2. 部署：把代码放到服务器上，我进行DNS配置、HTTTPS配置等。

  如果你的项目是第一次构建，我这边非常建议你首先在本地构建一遍，这样能早一些发现问题。避免在Vercel构建过程中，如果发现了问题，你还需要进行修改再次部署，浪费时间。

  2. 导入项目

  • 点击【Import Proiect】， 导入项目

  

  • 选择你的Github仓库

  

  • 填写项目的必要信息，以及对应的环境变量（重要！！），然后点击【Deploy】

  

  •稍等片刻后，看到这个页面，你的项目就部署成功了。可以直接点击预览图，访问项目

  

  3. 部署成功

  点击后直接查看该域名。就能看到项目很顺利的部署成功了~

  

  3.2 Vercel到底做了什么？

  1. 传统部署 vs Vercel部署

  也许你不清楚Vercel到底做了什么，似乎觉得直接把代码权限给了它之后，它就给你一个可以预览的网站链接这件事情是理所当然的。

  但是Vercel做了很多事情，可以通过下面的一张图做对比：

  

  也许很多你不理解没有关系，其实这里面的大多项，都是像阿里云、亚马逊云这些服务商的一个产品功能。你需要自己去配置并实现。

  这种传统的的部署方式，即使在2025年，在很多的小公司或者个人，也依然是这么操作的。可能只是一部分实现了自动化而已。然后Vercel，帮你把这个流程完全自动化了。

  如果你想认真学习Vecel，可以查看Vercel的文档：

  2. 定价

  这里面有过两个概念非常重要：边缘请求、

  边缘请求（Edge Requests）

  

  • 一句话解释：这是指您的网站被请求的次数。

  • 详细说明：每当用户的浏览器需要从 Vercel 的服务器上加载一个文件时，就算作一次“边缘请求”。这不仅仅是用户访问一个页面算一次。一个网页通常由很多个文件组成，比如：

  。1个 HTML 文件

  。3个 CSS 样式文件

  。5个 JavaScript 脚本文件

  。10张图片

  •举个例子：如果一个用户加载了上面这个网页，总共就会产生 1+3+5+10= 19 次边缘请求。如果100个用户访问了这个页面（并且没有本地缓存），就会产生大约1900次请求。

  •总结：这个指标衡量的是您的网站内容的受欢迎程度和被访问的频率，是按次数计算的。

  快速数据传输（Fast Data Transfer）

  

  •一句话解释：这就是我们常说的带宽（Bandwidth），指的是您的网站传输数据的总量

  • 详细说明：这个指标衡量的是从 Vercel服务器发送到用户浏览器的所有文件的总大小。每个文件，无论是 HTML、CSS、图片还是 API 响应，都有自己的体积（以 KB、MB或GB 为单位）。

  •举个例子：继续上面的例子，假设：

  。HTML 文件是 50 KB

  。3个 CSS 文件总共是 200 KB

  。5个JS 文件总共是 800 KB

  。10 张图片总共是2 MB（約2000KB）

  。 一个用户完整加载该页面所产生的数据传输量就是 50 + 200 + 800 + 2000 = 3050 KB，约等于3MB。

  。如果100个用户访问了这个页面，总的数据传输量就是 100 * 3 MB = 300 MB .

  •总结：这个指标衡量的是您的网站内容的体积和总消耗流量，是按数据大小（GB）计算的。

  4. 自定义域名

  4.1 购买域名

  Vercel默认部署的域名是 xxx.vercel.app。这个域名Vercel自己官方的域名。我们一般不会把这个域名直接当做网站，直接提供给用户。更多的只是作为早期自己测试和预览的一个方式。

  如果你想配置自己的域名，需要自己首先拥有一个域名。Vercel官方也提供了域名购买服务。当然其实域名购买有非常非常多的渠道，同一个域名不同渠道的价格可能不一致， 你可以尝试不同的渠道购买，例如：

  海外：

  • cloudflare

  • GoDaddy

  国内：

  • 阿里云

  • 腾讯云

  国内的域名服务商购买成功后，还有一些额外步骤，比如需要实名认证之类的才能使用。

  如果是部署在国内的服务器上，还需要实现ICP备案。但是如果你不考虑国内的稳定访问，部署在海外、香港或者Vercel上的话。就不需要进行ICP备案

  

  4.2 配置域名

  接下来你需要去到Vercel里面，点击【添加域名】，添加一个属于你的域名。

  

  注意添加成功后，不代表这个域名就可以使用了。你还需要去到你的DNS服务商进行配置。不同服务商可能UI交互有点细微的差异，但是基本都是一样的，你一看就懂。

  

  这半我们以腾讯云DNS配置为例，将刚才Vercel给到我们需要配置的内容，实现配置。

  回到页面，刷新一下。如果状态变了，那么就说明配置成功了

  

  访问网站，你就会发现网站顺利的访问成功了。

  

  项目源码

  1. 初始源码

  下载链接

  2. 最终源码

  下载链接

• Cursor2.0 Agent大更新（加更）

  2025年11月10日 18:32

  1. 课程说明

  Hello，本期教程是我们Cursor基础的加更课程。Cursor 2.0更新了很多东西，包括全新的Agent的一个布局，这个和之前的传统的代码编辑器IDE的布局会很不一样，甚至会带来Vibe Coding的思维的转变。

  同时Cursor2.0也支持了多智能体，你可以使用不同的模型来运行同一条提示词。还更新了自家的Composer模型，内置浏览器（这个浏览器功能有很多的妙用，我们课程也会讲到）、全新的代码Review方式等等。

  那为了避免新手对新的Cursor布局和之前课程不一致，产生困惑。同时也希望把一些这个版本更新的好用的功能介绍给大家我们就录制了这么一期课程。

  我们会带着大家开发一个非常简单的应用，这是一个AI初创产品评分与解析工具。输入初创公司产品落地页文本，AI以风险投资机构视角生成结构化分析报告。

  2. 初始化项目

  2.1 初始化Next.js

  到Nextjs的官网，复制对应的初始化空白Nextjs项目的命令，然后进入到终端中运行。

  命令：

  npx create-next-app@latest

  取名： cursor2-test 。然后用Cursor打开刚才创建的项目。

  

  然后场换到Composer1的模型，输入下面的提示词，运行起来这个项目。那目前这个项目会运行在 localhost:3000 端口。

  提示词：

  运行该项目

  

  2.2 新布局：带来的思维转变

  

  如上图所示，首先你会发现，目前的Cursor的布局变了。我们之前的Cursor的布局还是传统的IDE的方式，包括我们之前的课程，也都使用的Editor的方式。当然如果你不太喜欢目前的这个布局，还是喜欢之前的布局的话，你可以在设置中进行调整。

  

  但是现在，我们的变成了Agent的方式。这本质是一个使用AI思维的转变。

  

  之前的模式是代码优先。虽然右侧是AI区域，但是更多的这部分的Agent，我们其实是在和Agent对话的模式。我们切换不同的对话，这是在切换和这个Agent对话的上下文。

  

  而现在我们切换到Agent优先的地步，左侧变成了Agent的管理，目前就不再是切换上下文了，这是这个布局带来最大的改变。

  我们是在管理Agent，你的不同任务，可以通过管理不同的Agent，以及让不同的Agent 执行来实现。这是最大的不同。就这一点布局的调整，会让我们很大程度开始思考和重构我们之前Vibe Coding的方式

  

  那我们刚才那个启动项目的Agent，我们可以修改一下名字，叫做项目启动，专门用来管理项目启动和编译相关的Agent。

  2.3 产品需求描述

  现在新开一个Agent，然后输入提示词。我们把这个Agent当做产品经理去对待。主要用来开发对应的需求文档

  我现在希望开发一个能够用AI评估初创公司产品的评分和解析工具。请你帮我思考对应的产品需求文档
  
  功能如下：
  1. 我希望能够复制对应的网站落地页的所有文本给到AI
  2. AI能够通过该帮我用中文分析出这个这个产品的名称、核心功能、产品卖点、应用领域、市场评估等方面的核心要点。给一个简要的分析报告
  3. 报告顶部需要站在风险投资机构的角度，给出一个该项目的综合评分（满分100分），并给出简要理由
  
  
  这个项目的UI逻辑如下：
  1. 首页标题 + 文本对话框，默认5行。
  2. 文本对话框中输入对应落地也文案，点击开始分析按钮，AI就开始分析。弹出一个从顶部弹出的抽屉，占屏幕高度95%
  3. 抽屉在AI加载过程中，需要有一个骨架图，避免是一个空白
  4. AI生成后渲染报告
  
  对应的报告的部分的内容，请你给到一个示例的数据，我们以Cursor这款AI IDE为例。现在请你帮我构思对应的产品需求文档。并创建prd.md文件，在项目根目录下。

  确认对应的需文档。如果有问题，可以和AI沟通或者自己修改。

  

  最后我们把这个Agent修改成为产品经理

  

  同时提交本次的修改

  

  3. 开发项目

  3.1 使用Composer1

  

  新开一个Agent，然后输入以下提示词：

  @prd.md 基于该需求文档实现对应的前端页面，目前报告数据使用mock的json数据，先不接入后端。能完成整个项目流程的查看。前端组件使用shadcn实现，黑白简约风格

  3.2 原生浏览器

  目前Cursor支持了内置浏览器功能，你可以直接底部，选择Brower Tab。

  

  这样就能直接在Cursor里面预览了。

  

  3.3 审核代码

  目前可以直接点击Review按钮，查看代码的修改。现在会在一个Tab中显示多个文件的修改。很像Github上我们Review代码的方式。

  

  3.4 多模型能力

  现在Cursor 2.0支持了多模型能力，基于Git的WorkTree功能，现在Cursor支持同一个提示用不同的模型来执行。然后看效果，选择使用哪一个模型的。

  说实话，我觉得这个功能目前很不好用，我是不推荐的。很多时候纯属浪费token。如果大家觉得这个功能有什么很好的应用场景，可以告诉我。

  

  选择Composerl、Sonnet4.5和GPT-5 Codex的模型优化UI。输入下面的提示词：

    使用 Neobrutalism 风格优化该页面  @page.tsx  的UI样式。实现前端样式优化

  注意：

  1. 生成完成后，需要点击Apply，才能应用成功。

  2. 如果想撤回，点击Undo Apply

  3. 切换模型，需要Undo Apply后切换模型，然后再Apply。不然会有冲突

  

  3.5 浏览器审核元素

  如果UI上有想修改的，可以直接点击浏览器右上角的内容，让其实现修改。这样再对话框中就会直接将该元素加载到对话的上下文中。

  修改前：

  

  修改后：

  

  3.6 Plan Mode

  

  接下来我们使用Plan Mode开发后端AI能力，如果你有使用过Claude Code的切换 plan 模式，其实这一步很那个很像。

  1. 去到阿里云百炼获取自己的API Key

  

  2. 创建 .env. local, 输入对应的环境变量

  DASHSCOPE_API_KEY=sk-your-api-key

  

  3. 复制对应的千问提供的示例代码

  

  4. 新打开Agent， 使用Plan Mode开发，输入下方提示词

  参考下面的代码，实现产品后端AI功能的接入。用来实现用户输入产品落地页所有文案后，给出真实的报告解析。
  
  ```
  import OpenAI from "openai";
  const openai = new OpenAI(
      {
          // 若没有配置环境变量，请用百炼API Key将下行替换为：apiKey: "sk-xxx",
          apiKey: process.env.DASHSCOPE_API_KEY,
          baseURL: "https://dashscope.aliyuncs.com/compatible-mode/v1"
      }
  );
  const completion = await openai.chat.completions.create({
      model: "qwen3-max",
      messages: [
          { role: "system", content: "You are a helpful assistant." },
          { role: "user", content: "你是谁？" }
      ],
      stream: true
  });
  for await (const chunk of completion) {
      process.stdout.write(chunk.choices[0].delta.content);
  }
  ```

  有的时候AI会问你一些问题，你需要回复。

  

  OK，这就完成了这个产品的开发。

  

  3.7 音频输入

  

  最后一个新功能是Cursor2.0 支持了语音输入的，大家可以尝试使用。

  4.课程源码

  下载链接

• 掌握Cursor1.7：AI编程必备神器

  2025年11月10日 15:27

  这是一个关于使用Cursor AI编程的教程，在本教程中，我会带领大家一步一步学会使用Cursor这个强大的AI编程神器，废话不多说，我们直接action！

  1. Cursor的简介和安装

  1. Cursor是什么：Al辅助编程工具

  

  Cursor是一款专为提高编程效率而设计的AI辅助代码编辑器。即使你没有编程经验，也可以通过Cursor更轻松地开始编程之旅。

  2. 安装Cursor

  

  安装Cursor非常简单，只需几个步骤：

  1.访问cursor.com官网，点击“下载“按钮

  2. 下载适合你操作系统的安装程序

  3. 运行安装程序，按照提示完成安装

  3. 定价方案与功能对比

  

  我们的课程内容将会使用Cursor Pro的功能进行教学演示和开发，新注册用户可以享受前两周Pro的免费试用。

  4. 同类产品

  4.1 Trae

  

  注意！务必访问海外版本的https://www.trae.ail。你才能使用Claude等优秀的大模型

  Trae是一款字节出的AI集成开发环境（IDE），是类似Cursor一样的产品。目前免费使用， 如果对价格比较敏感，对产品又没有过多要求的朋友，可以尝试现阶段自嫖Trae。大体的使用体验和流程和Cursor一样。

  1.Builder模式：通过聊天界面构建项目，Trae能自动分解并执行任务，同时让你保持对过程的控制。（类似Cursor的agent模式，但是整体体验还没那么好）

  2. 多模态能力：支持图片上传，帮助更精确地澄清开发需求。

  3. 全面上下文理解：能分析整个代码库，结合编辑器和终端信息，更深入地理解你的工作流程。

  4.智能代码补全：实时扩展代码，直观预测你的编辑意图，并自动应用更改。

  5.用户友好界面：多位用户评价其界面美观，操作流畅，比其他AI编码平台如Cursor和 Windsurf更出色。

  4.2 Windsurf

  Windsurf是Exafunction公司推出的AI集成开发环境（DE），专业版是$15一个月，比 Cursor要便宜。官网介绍的功能如下

  1.Flows功能：结合了Agent（代理）和Copilot（副驾驶）的能力，让AI能既能独立完成复杂任务，又能与开发者紧密协作。（类似Cursor的agent模式，但强调更深度的状态同步）

  2. Cascade系统：Windsurf的核心AI功能，结合了深度代码库理解、高级工具集和实时感知用户行为的能力，支持多种大型语言模型。

  3. 多文件编辑：支持跨文件编辑和理解，使处理复杂代码库变得更容易。

  4. 智能命令建议：能够自动提供和执行终端命令。

  5.内置网站预览：直接在IDE中查看网站效果，点击元素后让AI立即进行修改。

  

  2. 熟悉Cursor界面和工作区

  如果点击鼠标右键没有【显示预览】按钮的，需要点击插件，安装一个对应的插件 Live Preview就有了！

  

  1. 初次启动Cursor

  1.1新建项目

  如果你是第一次打开Cursor，首先是需要新建一个项目，这边项目是指的文件夹。

  点击Open Projects，如果你是新建一个项目，那么去创建一个项目的文件夹。如果你已经有了项目，那直接打开指定的文件夹就可以。

  

  1.2 安装中文界面

  首先我们去到侧边栏的插件部分，点击第4个icon。

  然后搜索这个Chinese的中文包，这样的话就可以给页面提供中文的一个界面。

  

  2. 界面布局详解

  

  Cursor的界面设计简洁直观，即使是初学者也能快速上手。当你打开Cursor，会看到以下主要区域：

  整体布局：

  • 左侧：侧边栏，包含文件浏览器、搜索、Git和插件等工具

  •中间：代码编辑区，这是你写代码的主要区域

  •底部：终端和输出面，我们常用的就是终端部分

  • 右侧（按需显示）：AI聊天区域

  这种布局设计让你能够同时着到代码文件、编写代码，并与AI助手交流，非常方便高效。

  2.1 侧边栏部分

  资源管理器（项目文件）

  

  • 左侧侧边栏默认显示“资源管理器”视图

  • 这里你可以看到项目中的所有文件和文件夹

  • 点击文件可以在编辑区打开它

  • 右键文件或文件夹可以进行创建、删除、重命名等操作

  

  搜索功能是Cursor侧边栏中极其重要的一部分，从您的截图中可以看到它标注为“搜索”：

  • 全局搜索：让你能在整个项目中快速查找文件或代码

  • 操作方式：点击侧边栏中的搜索图标或使用快捷键Cmd/Ctrl+Shift+F

  • 搜索框：可输入关键词、代码片段或文件名

  •过滤选项：

  。“包含的文件”：指定要搜索的文件类型或目录

  。 “排除的文件”：指定不需要搜索的文件或目录

  。 可以使用通配待（如*js）来按文件类型筛选

  初学者使用技巧：

  • 当项目变大时，使用搜索功能比手动浏览文件夹更高效

  •搜索特定函数名或变量名，可以快速找到它们在项目中的所有引用 • 搜索时注意大小写和完整匹配选项，这会影响搜索结果的精确度 • 学会使用正则表达式可以进行更复杂的搜索模式匹

  搜索功能对于理解和导航代码库非常重要，特别是当你在处理不熟悉的项目或大型代码库时，这个功能将成为你最常用的工具之一。

  

  •在侧边栏底部有Git图标，点击可以切换到Git视图

  • 这里可以看到文件的修改状态（新增、修改、删除）

  • 可以直接提交代码更改，无需离开编辑器

  

  • 侧边栏中的扩展图标让你可以安装额外的功能扩展

  •初学者推荐安装的扩展：主题扩展、代码高亮、自动格式化等

  • 点击扩展图标，在搜索框中输入需要的功能即可查找相关扩展

  2.2. 代码编辑区

  

  中央的代码编辑区可能是程序员用得比较多的地方，但如果你只是想Vibe Coding，可能这一块并不是你最经常使用的，但是我们还是得了解一下

  • 每个文件在独立的标签页中打开，并且可以左石分屏

  • 代码自动带有语法高亮（不同的代码部分会以不同颜色显示）

  •行号显示在左侧，便于定位代码位置

  • Tab：当你开始输入时，Cursor的AI会自动提供代码补全建议。按Tab键可以接受AI的补全建议

  • Ctrl/Command +K：指定代码编辑和修改

  特别提示：当Al提供较长的代码补全时，会显示预览，你可以按Tab接受，或继续输入忽略建议。

  2.3 终端与输出面板

  

  底部区域包含终端和各种其他输出信息，这边我们只介绍终端部分就可以，这是我们会经常都会使用到的终端：

  •可以直接在编辑器内执行命令，无需切换到外部终端

  •使用快捷键 Ctrl/Command+（反引号，通常在Tab键上方）可以快速打开/关闭终端 • 终端支持命令历史记录和自动补全

  2.4. Al面板

  最右侧的AI聊天区域，就是我们最经常使用的。也是我们AI编程的核心，这部分我们会在下个章节详细讲到。

  

  •现在可以通过切换不同的Tab，来实现多窗口对话。

  • Agent、Ask、Manual是不同的ai模式的选择，其中Agent和Ask模式是我们最常用的。

  •在对话框中有很多的工具，可以通过 @符合唤起。

  • 对话框可以添加图片等素材，方便直接让AI生成页面的样式

  3. Cursor Settings

  

  点击右上角的这个齿轮可以出现Cursor Settings，然后这里面有一些大家需要了解的设置给大家讲一下。

  3.1 索引

  

  所有代码库的索引都是在这儿完成的，如果说你的右侧AI聊天面板没有@出文件，那说明还没有索引完成。可以查看一下这里的索引进度，并且你可以重新点击二次索引。

  3.2 Dcos

  

  这里你可以添加一些网站的文档地址链接，然后Cursor会进行索引，添加到我们的上下文当中。例如小程序的某个新功能Cursor不太熟悉，那这个时候就需要你手动的引入相关的文档，这个时候Cursor就有了相关的一个知识。

  需要注意，有一些网站的文档是需要登录之后才能够看的，这些文档Cursor是没有办法索引成功的。

  3.3 自定义模型

  

  Cursor 允许你为各种提供商输入自己的 API 密钥，以便你自行发送任意数量的AI消息 （但是费用需要自理）。当使用客户 API 密钥时，Cursor将在调用提供商时使用该密钥。

  3.4 Cursor Rules

  

  项目规则提供了一个强大而灵活的系统，User Rules会在所有的项目当中应用。Project Rules项目规则存储在**-cursor/rules**目录中，可对项目不同部分的 AI 行为进行精细控制。

  它们的工作原理如下

  • 语义描述：每条规则都可以包含何时应用该规则的描述

  • 文件模式匹配：使用glob 模式指定规则适用于哪些文件/文件夹 • 自动附件：引用匹配文件时可自动包含规则

  •参考文件：在项目规则中使用@file，以便在应用规则时将它们作为上下文包含在内。

  3.5 MCP

  

  Cursor支持在项目中添加自己的MCP工具，然后会自动的进行调用。MCP之后更成熟后，我会出一个专门的章节进行讲，目前还不太成熟。

  3.6. Beta Features

  

  3.7 自定义模式

  

  如果打开这个自定义模式，可以去创建自己的一个模式，比如说你可以自己创建一个写作 （Write）模式，然后在Cursor里面完成你内容的写作。这个功能才最新推出，所以说大家如果想了解可以去看一下这篇公众号写的还不错。

  但是对于我们的课程同学而言，使用ask模式和agent的模式就已经完全足够了。

  3. Cursor的AI编程核心：Chat

  聊天概述

  

  1. 模式mode

  你可以在这里选择不同的模式，我们最常用的是Agent的模式和Ask模式， Manual的模式不建议我们新手使用。

  2. 选择模型

  点击模型选择处，你可以选择不同的模型，那我这边建议你使用deepseek-thinking模式，它的代码能力是最强的，如果说你的项目需求比较复杂。那么可以打开Thinking模式。代价就是时间会变得很久，而且消耗的请求数也会变多。

  如果你是把Cursor当成文档写作工具用，那可以尝试使用其他的模型，比方说 O1。

  

  3. 新增聊天对话Tab

  可以通过点击+号。去新开启或者增加聊天对话框

  4. 查看聊天历史

  你可以点击这个按钮，然后去切换到之前的聊天窗口当中。

  

  5. 回退历史

  Cursor当中有个检查点的概念，你如果点击【Restore checkpoint】， 就能够对修改进行回退.

  

  Agent模式

  

  在Agent模式下，Cursor默认模式配备了所有工具，可以有效地处理各种编码任务。它是 Cursor 中的默认模式，最适合大多数任务。它启用了所有工具，使其能够执行完成手头任务所需的所有操作。

  1. 技巧1：@文件和文件夹

  @文件和文件夹，能够给Cursor明确指定你想要修改的上下文，减少工具调用次数

  

  2.技巧2：@指定文档

  @文档，能给Al提供更准确的第三方上下文，这样能够给Cursor补充一些他不知道、不熟悉的知识

  

  3.技巧3：@指定的规则

  @指定的规则，可以在一些需要有明确规则的动作的时候，给Cursor以强约束。

  例如你有一个必须得封装组件引入页面的约束，那么这个时候可以通过@指定的 Cursor Rules的方式，来给Cursor强约束。这样Cursor就不会把所有的代码写在一个页面了。

  

  4.技巧4：给到图片生成前端

  在Cursor中可以复制粘贴或者上传图片来让AI帮你生成前端的代码，采用 Cladue3.7的模型，生成的效果非常好。

  

  5. 技巧5：粘贴之前的聊天历史

  如果你新打开了一个聊天对话框，就想获取之前聊天对话的一些历史给到当前的对话框，那么可以使用Past Chats的方式，给到Al上下文。

  

  Ask模式

  

  Ask用于在代码库中提问、探索和查找。它是 Cursor 中的内置模式，默认情况下会启用搜索工具。你可以就把它当成类似于ChatGPT的聊天工具，但是他厉害之处是可以知道你整个项目的上下文。

  1. 技巧1：用Ask来学习

  你可以通过Ask模式来学习，例如你新安装了一个模板之后，可以直接 @package.json和 README.md 和这两个文件，然后来让他告诉你项目如何启动， 有什么技术栈？

  

  你有不懂的地方也可以通过Ask模式直接复制粘贴对应的代码，然后让它告诉你！如果你想学习相关的代码，那完全可以有一个随叫随到的老师。

  

  2.技巧2：应用代码

  你如果有想修改或者生成的代码，通常我们是使用agent的模式，但是你也可以使用ask模式。然后点击Apply，Cursor就可以帮你自动的修改代码了。

  

  OK, 以上就是cursor1.7这款AI编程必备神器的使用教程，我的手指关节快要断了！！！