mcpField
V
vite

vite

github.com/partme-ai开发727140 次安装5 周前更新
代码仓库

关于 vite

vite 是面向 Vite 开发者的文档参考技能，将问题对应到指南、配置和插件资料，涵盖开发、构建、SSR、部署及 API。

主要功能

  1. 01指南主题参考映射
  2. 02Vite 配置资料
  3. 03插件选择指南
  4. 04CLI 与 API 内容
  5. 05SSR 和部署主题

适用场景

  1. 01查找 Vite 配置指南
  2. 02选择 Vite 插件
  3. 03使用 HMR 或 JavaScript API
  4. 04排查 SSR 或部署配置

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/partme-ai/full-stack-skills --skill vite

安装后在 Claude Code 中输入/vite确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

api/
cli.md
config.md
plugin-api.md
examples/config/
build-options.md
configuring-vite.md
dep-optimization-options.md
preview-options.md
server-options.md
shared-options.md
ssr-options.md
worker-options.md
examples/guide/
api-environment-frameworks.md
api-environment-instances.md
api-environment-plugins.md
api-environment-runtimes.md
api-environment.md
api-hmr.md
api-javascript.md
api-plugin.md
assets.md
backend-integration.md
build.md
cli.md
dep-pre-bundling.md
env-and-mode.md
features.md
getting-started.md
migration.md
performance.md
philosophy.md

详细介绍

适用场景

在用户想要执行以下操作时使用此技能：

  • 学习 Vite 指南中的主题，从入门到性能优化
  • 使用官方配置参考配置 Vite
  • 从官方插件页面选择或了解 Vite 插件
  • 使用 Vite CLI、HMR API 或 JavaScript API
  • 处理 Vite 中的 SSR、后端集成或部署场景

使用方法

  1. 确定主题，根据用户的请求进行判断。
  2. 打开匹配的指南示例文件，路径为 examples/guide/。
  3. 如果需要配置，打开 examples/config/ 中匹配的文件。
  4. 如果需要选择插件，打开 examples/plugins.md。
  5. 严格遵循官方文档，确保输出与引用页面一致。
  6. 验证：运行 npm run build，确认配置更改可以编译；运行 npm run preview，测试生产环境输出。
指南映射（一一对应 https://cn.vitejs.dev/guide/）

简介

指南

API

环境 API

配置映射（一一对应 https://cn.vitejs.dev/config/）
插件映射（一一对应 https://cn.vitejs.dev/plugins/）
内联快速开始
# Create a new Vite project
npm create vite@latest my-app -- --template react-ts

# Install and run
cd my-app && npm install
npm run dev      # Dev server with HMR
npm run build    # Production build
npm run preview  # Preview production build

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] },
      },
    },
  },
});

最佳实践

  • 使用 defineConfig 获取 TypeScript 类型提示和自动补全
  • 在 server.proxy 中配置代理，以便在开发期间调用 API
  • 使用 build.rollupOptions.output.manualChunks 拆分供应商代码
  • 在开发环境中启用 source map；在生产环境中禁用，以减小构建体积
  • 使用 import.meta.env 获取环境变量（以 VITE_ 为前缀）

资源

关键词

Vite、构建工具、开发服务器、HMR、配置、插件、SSR、CLI、依赖预打包、资源

评论

支持 Markdown