这个目录保存可以独立运行的 Vite 示例项目。
每个示例都是一个单独的小项目，都有自己的 package.json。你可以进入任意一个示例目录，单独安装依赖、启动、修改、构建和测试。
进入某个示例目录：
cd examples/01-vanilla-basic安装依赖：
npm install启动开发服务器：
npm run dev构建正式文件：
npm run build预览构建结果：
npm run preview| 示例 | 主题 | 适合练习 |
|---|---|---|
01-vanilla-basic |
最小原生 JS 页面 | Vite 基本运行流程 |
02-vanilla-modules |
import/export 模块拆分 | ES Modules |
03-vanilla-counter-state |
计数器与状态 | 事件绑定、状态更新 |
04-src-vs-public-assets |
src 和 public 资源对比 | 图片资源引用方式 |
05-vite-config-and-env |
Vite 配置与环境变量 | 端口、别名、环境变量 |
06-vanilla-todo-localstorage |
Todo 小应用 | DOM 操作、本地存储 |
07-react-basic |
Vite + React | React 项目结构 |
08-vue-basic |
Vite + Vue | Vue 项目结构 |
建议从 01 到 08 依次运行。
前 6 个示例都使用原生 JavaScript，更适合理解 Vite 本身。
React 和 Vue 示例建议放在后面，因为它们会引入框架概念。
例如运行第一个示例：
cd C:\Users\Administrator\Desktop\vite-learning-notes\examples\01-vanilla-basic
npm install
npm run dev看到类似地址后，在浏览器打开：
http://localhost:5173/
每个示例都建议做这些测试：
- 修改
src/main.js或组件文件，观察浏览器是否自动更新。 - 修改
src/style.css，观察 HMR 效果。 - 执行
npm run build，观察是否生成dist。 - 执行
npm run preview，预览打包后的效果。 - 尝试删除一个 import，再观察报错和恢复过程。
- 不要把
node_modules上传到 GitHub。 - 每个示例第一次运行前都需要执行
npm install。 - 如果某个示例运行失败，先确认当前目录里是否有
package.json。 - React 和 Vue 示例需要额外下载框架依赖，首次
npm install可能比原生 JS 示例更久。