您的位置：首页 > 手游攻略 > Cursor怎么从零搭一个前端页面

Cursor怎么从零搭一个前端页面

作者：互联网　　时间： 2026-09-04 20:07:54 　

在人工智能内容学习中，Cursor怎么从零搭一个前端页面是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

需先初始化项目结构、安装Vite依赖、配置vite.config.js并添加dev脚本，再创建index.html、style.css和main.js，通过npm run dev启动带热更新的本地服务。

用Cursor从零搭建一个前端页面，需要先初始化项目结构、安装必要依赖、配置开发服务器，再编写HTML/CSS/JS文件并实时预览效果。整个过程不依赖脚手架模板，完全手动控制文件生成和运行逻辑。

创建项目文件夹并初始化npm

在终端中执行 mkdir my-frontend && cd my-frontend 创建空目录，再运行 npm init -y 生成 package.json。这一步必须做，否则后续无法安装本地开发服务器依赖。

执行 npm install --save-dev vite 安装Vite作为轻量开发服务器。Vite比Webpack启动更快，适合快速验证页面结构，【不装vite会导致npm run dev报错退出】。

在项目根目录新建 index.html 文件，写入标准HTML5结构：

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我的页面</title></head><body><h1>Hello Cursor</h1></body></html>

保存后，直接双击打开该文件能在浏览器中看到标题——但此时没有热更新，修改后需手动刷新。

第一步：在 package.json 的 "scripts" 字段里添加 "dev": "vite"。

第二步：在项目根目录新建 vite.config.js，内容为：export default { root: '.' }。这告诉Vite把当前目录当作项目根，否则它会默认找 src 子目录，而我们还没建这个文件夹。