AI 编程基础

什么是 Vite

Vite（法语”快”的意思）是一个前端构建工具。它的作用：

启动一个带热更新的开发服务器（改了代码，页面自动刷新）
帮你打包代码，准备上线
支持 Vue / React 等框架
比传统工具快很多倍

创建 Vite 项目

打开终端，运行：

npm create vite@latest my-app -- --template vanilla

参数说明：

my-app → 项目名
--template vanilla → 用原生 JS 模板（不用框架）

然后：

cd my-app
npm install
npm run dev

浏览器打开 http://localhost:5173，看到页面就成功了！

项目结构解析

my-app/
├── index.html          ← 入口 HTML
├── package.json        ← 项目配置
├── vite.config.js      ← Vite 配置
├── public/             ← 静态文件（图片等）
│   └── favicon.svg
└── src/                ← 源代码（你写代码的地方）
    ├── main.js         ← JS 入口
    ├── style.css       ← 全局样式
    └── counter.js      ← 示例功能

关键文件解释

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

注意 <script type="module">——这意味着你可以在 JS 中使用 import 和 export。

src/main.js

import './style.css';

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
`;

import 就像”把这边的样式引入进来”。

添加一个页面

告诉 AI：

帮我在这个 Vite 项目里添加一个漂亮的首页，包含一个导航栏和一个 Hero 区域

AI 会帮你修改 main.js 和 style.css。

Vite 项目的优势

传统方式	Vite 方式
手动刷新浏览器	保存即刷新
直接写 HTML	模块化开发
上线手动处理	`npm run build` 一键打包

小结

Vite 让前端开发变得更现代、更快。你现在知道：

npm create vite@latest 创建项目
npm run dev 启动开发
src/ 目录是你的主战场

下一篇我们将从 AI 对话进阶，学习如何写出高质量的提示词。