需先初始化项目结构、安装Vite依赖、配置vite.config.js并添加dev脚本，再创建index.html、style.css和main.js，通过npm run dev启动带热更新的本地服务。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用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报错退出】。
生成基础HTML骨架
在项目根目录新建 index.html 文件，写入标准HTML5结构：
立即学习“前端免费学习笔记（深入）”；
<meta charset="UTF-8">
<title>我的页面</title>
<h1>Hello Cursor</h1>
保存后，直接双击打开该文件能在浏览器中看到标题——但此时没有热更新，修改后需手动刷新。
配置Vite开发服务
第一步：在 package.json 的 "scripts" 字段里添加 "dev": "vite"。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
第二步：在项目根目录新建 vite.config.js，内容为：export default { root: '.' }。这告诉Vite把当前目录当作项目根，否则它会默认找 src 子目录，而我们还没建这个文件夹。
第三步：运行 npm run dev。终端会输出本地地址（通常是 http://localhost:5173），点击即可打开带热更新的页面。
添加样式与交互逻辑
方法一：内联方式
在 index.html 的 里加 <style>h1{color:#333;font-size:2rem;}</style>；在 底部加 <script>document.querySelector('h1').onclick = () => alert('clicked');</script>。适合单页快速验证，但样式和逻辑混在一起不易维护。
方法二：分离文件
新建 style.css 和 main.js，分别写入样式规则和JS代码；然后在 index.html 中通过 <link rel="stylesheet" href="style.css"> 和 <script type="module" src="main.js"></script> 引入。注意 type="module" 是必须的，否则ES6语法（如 import）会报错。
