如何在Vue(Inertia.js)中局部注册第三方组件而非全局注册？

为啥局部注册没用？ #

像v-calendar这类组件库，大多是以Vue插件形式封装的。全局用app.use()时，插件内部会自动帮你注册所有子组件、指令甚至全局方法。但你直接把整个插件对象丢到组件的components选项里是无效的——components只认单个Vue组件实例，不认插件。

v-calendar 局部注册的正确姿势 #

v-calendar支持单独导出单个组件，不用全局导入整个插件，步骤如下：

1. 导入单个组件和样式 #

在需要用的组件文件里，别导入整个VCalendar，只导入你需要的组件（比如Calendar）和对应样式：

<script setup>
// 只导入Calendar组件
import { Calendar } from 'v-calendar';
// 按需导入样式，减少打包体积
import 'v-calendar/style.css';
</script>

2. 直接使用组件 #

用<script setup>的话，导入的组件会自动注册，模板里直接用就行：

<template>
  <Calendar />
</template>

如果是选项式API，手动在components里注册：

<script>
import { Calendar } from 'v-calendar';
import 'v-calendar/style.css';

export default {
  components: {
    Calendar
  }
}
</script>

<template>
  <!-- 可以用<Calendar>或者<calendar>，Vue会自动转换大小写 -->
  <Calendar />
</template>

其他组件库的通用解决方法 #

• 查文档找按需导入方式：现在主流组件库（比如Element Plus、Ant Design Vue）都支持单独导出组件，直接看文档里的“按需导入”章节，照着配置即可。
• 用自动按需导入插件：如果如果组件库没明确说明单个组件导出路径，用unplugin-vue-components这类工具，它会自动扫描你模板里用的组件，只导入需要的部分，不用手动写导入和注册。配置示例（Vite环境）：

  // vite.config.js
  import Components from 'unplugin-vue-components/vite';
  import { VCalendarResolver } from 'unplugin-vue-components/resolvers';
  
  export default {
    plugins: [
      Components({
        resolvers: [VCalendarResolver()]
      })
    ]
  }
  

  配置完直接在模板里用对应组件标签即可，无需手动处理导入。
• 手动提取组件（不推荐）：如果组件库完全没做按需支持，只能去源码里找组件的具体导出路径，手动导入单个组件——这种方式维护成本高，尽量避免。

注意点 #

• 局部注册一定要记得单独导入组件的样式，不然会出现样式缺失的问题。
• Inertia.js不影响组件注册逻辑，只要Vue组件注册正确，就能正常使用，无需额外配置。

内容的提问来源于stack exchange，提问作者Moauya Meghari