请问全局按需导入组件时，使用该组件是否还需要再次导入？

[exidot]

1. 我已经在项目 src/plugins/naive.ts 中按需导入组件（以 NConfigProvider 组件为例）：

import type { App } from 'vue'
import {
  create,
  NConfigProvider,
  //...
  ],
})
/**
 * 安装 Naive UI 组件库
 * @param app Vue 应用程序
 */
 export function setupNaive(app: App<Element>) {
  app.use(naive)
}

2. 然后在 main.ts 中使用了 naive ui

import { createApp } from 'vue'
import App from './App.vue'

import { setupNaive } from "@/plugins/naive"

const app = createApp(App)
setupNaive(app)
app.mount('#app')

3. 我在 App.vue 中是否应该再次导入 NConfigProvider ？

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'

/// 可以看到，当我注释掉下面导入语句时，在模板中组件名称变红，也就是说 Volar 插件没有正常识别到 NConfigProvider。（我是用的是 Volar 插件，并且插件没有进行任何配置）
/// 而当我取消注释时，可以正常识别 NConfigProvider，并且可以正常补全 props
//import { NConfigProvider } from 'naive-ui'
</script>

<template>
  <NConfigProvider>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  </NConfigProvider>
</template>

4. 问题

• 请问我该如何做，才能让 Volar 可以识别全局按需导入的组件，从而进行名称和props等的补全？
• 请问已经全局导入，在使用时再次导入会造成什么问题嘛？比如打包体积增大？
• 感谢大佬的耐心答疑！

[07akioni]

1. 请问我该如何做，才能让 Volar 可以识别全局按需导入的组件，从而进行名称和props等的补全？

自己按照 Volar 的功能编写它需要的的类型，把组件对应的类型放到合适的位置。

2. 请问已经全局导入，在使用时再次导入会造成什么问题嘛？比如打包体积增大？

没啥特殊影响，理论上不会有问题。只是不建议进行全局安装而已。

[07akioni]

Volar 识别不了你写的全局安装代码

[exidot]

了解了。非常感谢您的解答。

另外 NaiveUI 在使用时，可以不在 main.ts 中编写类似 app.use(naive) 的代码来引入 Naive ，而只需要随用随导吗？
这点在naive官方文档中好像没有强调，如果真是只需要随用随导的话，真的是太方便了！

[07akioni]

这个在按需引入那块已经提到了，不建议全局安装