Vue Academy · 课时

Vite 生态：插件与工具

unplugin 生态、vite-plugin-vue、vite-plugin-inspect，以及 vite-bundle-visualizer

Vite 生态：插件与工具 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

Vite 插件生态系统

Vite 的插件系统（建立在 Rollup 接口和 Vite 专用钩子之上）构成了丰富的生态系统。对于 Vue 项目，一些插件可以显著改善开发体验：自动导入、自动注册组件、检查转换过程以及分析构建包。

unplugin-auto-import

unplugin-auto-import 会自动导入常用 API（Vue 的 ref、computed、Router/Pinia 辅助函数以及您自己的组合式函数），这样您无需编写导入语句即可使用它们。

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

自动导入您的组合式函数

将它指向您的组合式函数目录，这些函数也会变为全局可用。它会生成一个 .d.ts 文件，因此 TypeScript 和您的编辑器仍然能够理解这些函数。

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components 会按需自动导入并注册组件——在模板中放入 <MyButton />，插件就会自动导入它。它还会对未使用的组件进行摇树优化。

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

用户界面库的解析器

组件插件支持热门用户界面库（Element Plus、Vuetify、Naive UI）的解析器，使用组件时会自动导入相应的组件和样式，无需手动注册。

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

vite-plugin-inspect 提供了一个用户界面，用于查看每个插件如何通过转换流水线处理您的代码。它对于调试某个文件为何会变成当前形式非常有帮助。

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

读取转换流水线

在 Inspect 用户界面中，您可以选择一个模块，并逐步查看每个插件的转换过程。例如，您可以看到 Vue SFC 如何拆分为渲染部分和脚本部分，以及自动导入如何注入代码，从而定位行为异常的插件。

构建包可视化工具

要了解生产构建包的大小，可以使用可视化插件（例如 rollup-plugin-visualizer）。它会生成一张交互式矩形树图，展示构建后每个分块中的内容。

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

根据可视化结果采取行动

使用矩形树图找出体积过大的依赖和重复的包。常见的解决方法包括：延迟加载较大的路由或组件、改用更轻量的库，或者配置 manualChunks 来拆分供应商代码。

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

组合使用这些插件

这些插件可以很好地组合使用。典型的 Vue 配置会同时加入自动导入、组件插件、仅用于开发的 Inspect，以及仅用于构建的可视化工具，从而获得最流畅的工作流程。

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

了解 Git 忽略设置中的 dts 文件

自动导入插件和组件插件会生成 .d.ts 文件。您需要决定是否提交这些文件（无需构建即可帮助持续集成执行类型检查），还是将它们加入 Git 忽略列表（开发启动时重新生成）。无论采用哪种方式，都要将它们保留在 tsconfig 的包含范围内。

快速检查

请测试您对 Vite 工具生态系统的理解。

回顾

您已经了解了 Vite 工具生态系统：

unplugin-auto-import——自动导入 Vue API 和组合式函数
unplugin-vue-components——自动导入和注册组件，并支持用户界面解析器
vite-plugin-inspect——查看插件如何转换每个模块
构建包可视化工具——展示分块内容的矩形树图，为优化提供依据
这些插件可以组合成流畅的 Vue 开发与构建工作流程

常见问题解答

「Vite 生态：插件与工具」课时是免费的吗？

是的 — 「Vite 生态：插件与工具」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「Vite 生态：插件与工具」这节课中我会学到什么？

unplugin 生态、vite-plugin-vue、vite-plugin-inspect，以及 vite-bundle-visualizer 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「Vite 生态：插件与工具」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy