Vite上手分三步：先5分钟跑通最小项目，再掌握vite.config.js四大核心配置项，最后按真实场景（如TS支持、API代理、路径别名等）逐步扩展能力。
直接上手 Vite 不需要先啃完所有概念，关键是从“能跑起来”到“知道为什么这么配”，再过渡到“按需调整”。整个过程分三步走：先搭出可运行的最小项目，再理解核心配置逻辑，最后结合真实需求做定制。下面按实际学习路径展开。
第一步：5分钟跑通一个可工作的项目
这是建立信心和手感的关键。不用纠结模板选型，用官方推荐命令：
- 终端执行：npm create vite@latest my-app -- --template vanilla（纯 JS）或 --template vue（Vue 3）
- 进目录、装依赖：cd my-app && npm install
- 启动开发服务器：npm run dev，浏览器打开 http://localhost:5173
此时你已拥有热更新、ESM 支持、自动类型提示（若选 TS 模板）等全部基础能力。别急着改配置，先在 src/ 下写点 HTML/CSS/JS，感受“改保存→页面秒刷新”的节奏。
第二步：读懂 vite.config.js 的核心字段
vite.config.js 不是必须文件，但它是控制力的入口。初期只需掌握四个高频项：
- server.port：改端口，避免冲突（如设为 3000）
- server.proxy：开发时转发 API 请求（例如本地调后端接口）
- resolve.alias：给常用路径起别名（如 @/components → src/components）
- build.rollupOptions.input：指定打包入口（默认是 src/main.js，多页应用需手动改）
每次只加一项，改完 npm run dev 验证效果。你会发现，Vite 的配置是“用得到才加”，不是一上来就堆满。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
第三步：按场景补能力，不预设技术栈
熟练 ≠ 掌握全部插件，而是清楚“遇到什么问题，该找哪个配置解”。常见场景对应动作如下：
- 要支持 TypeScript？删掉 vanilla 模板重开一个 --template vue-ts 或 --template react-ts，Vite 自动集成
- 静态资源（图片、字体）路径乱？把文件放 public/ 目录下，用绝对路径引用（如 /logo.png）
- 想让构建产物更小？确认 build.minify 是 true（默认开启），无需额外操作
- 需要部署到子路径（如 /blog）？在配置里加 base: '/blog/'，index.html 中的资源路径会自动修正
每个动作都对应一个明确问题，做完即止。不需要背插件文档，遇到卡点再查 vitejs.dev/config 官方配置表，搜关键词即可。
第四步：用真实项目倒逼深入
学得最牢的方式是做一个小而完整的东西。比如：
- 用 Vite + Vue 写一个带搜索功能的 Markdown 博客列表页
- 用 Vite + React 做一个从 localStorage 读取并渲染待办事项的单页应用
- 用 Vite + vanilla JS 封装一个可复用的轮播图组件，并发布为 npm 包
过程中自然会碰到路由怎么配、样式怎么作用域、环境变量怎么切、构建后如何部署等问题。这些问题比教程里的例子更具体，查一次就记住一类模式。
