关于 vite
面向前端开发者的 Vite 6.x 技能,涵盖配置、开发与生产构建,也介绍插件、框架集成和高级 API。
主要功能
- 01配置与命令行命令
- 02TypeScript、JSX 与 CSS 处理
- 03插件与静态资源
- 04环境变量与 HMR
- 05生产、库与 SSR 构建
- 06JavaScript 与插件 API
适用场景
- 01配置 Vite 项目
- 02设置开发服务器
- 03构建库或多页面应用
- 04将 Vite 集成到后端
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ uni-helper/ skills --skill vite安装后在 Claude Code 中输入/vite确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
GENERATION.mdLICENSE.mdSYNC.mdreferences/advanced-api.mdadvanced-backend.mdadvanced-performance.mdadvanced-plugin-api.mdbuild-library.mdbuild-production.mdbuild-ssr.mdcore-cli.mdcore-config.mdcore-features.mdcore-plugins.mdfeatures-assets.mdfeatures-css.mdfeatures-dep-bundling.mdfeatures-env.mdfeatures-glob-import.mdfeatures-hmr.mdfeatures-workers.md详细介绍
Vite 是一款现代前端开发构建工具,支持通过原生 ES 模块即时启动服务器、实现闪电般快速的 HMR,并使用 Rolldown/Rollup 优化生产构建。它开箱即用地支持 TypeScript、JSX、CSS 预处理器,并拥有丰富的插件生态系统。
此技能基于 Vite 6.x,于 2026-01-28 生成。
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 配置 | 配置文件设置、defineConfig、条件配置和异步配置 | core-config |
| CLI 命令 | 开发服务器、构建、预览命令及选项 | core-cli |
| 核心功能 | TypeScript、JSX、CSS、HTML 处理、JSON 处理 | core-features |
| 使用插件 | 添加、配置和排列插件 | core-plugins |
功能
| 主题 | 描述 | 参考 |
|---|---|---|
| CSS 处理 | CSS 模块、预处理器、PostCSS、Lightning CSS | features-css |
| 静态资源 | 资源导入、公共目录、URL 处理 | features-assets |
| Glob 导入 | import.meta.glob、动态导入、批量加载 | features-glob-import |
| 环境变量 | .env 文件、模式、import.meta.env 常量 | features-env |
| HMR API | 热模块替换客户端 API | features-hmr |
| Web Workers | Worker 导入和配置 | features-workers |
| 依赖预打包 | optimizeDeps、缓存、monorepo 设置 | features-dep-bundling |
构建
| 主题 | 描述 | 参考 |
|---|---|---|
| 生产构建 | 构建选项、浏览器目标、多页应用 | build-production |
| 库模式 | 构建带有适当 package 导出的库 | build-library |
| SSR | 服务端渲染的设置和配置 | build-ssr |
高级
| 主题 | 描述 | 参考 |
|---|---|---|
| JavaScript API | createServer、build、preview 编程 API | advanced-api |
| 插件 API | 创建 Vite 插件、钩子、虚拟模块 | advanced-plugin-api |
| 性能 | 开发服务器和构建的优化技巧 | advanced-performance |
| 后端集成 | 将 Vite 与传统后端集成 | advanced-backend |
评论
支持 Markdown