niave ui全局按需引入配置提示不生效解决

552 阅读1分钟

遇到问题

全局按需引入niave ui

import { App } from "vue";
import { create, NButton, NMenu, NConfigProvider } from "naive-ui";

const naive = create({
  components: [NButton, NMenu, NConfigProvider]
});

export function setupNaive(app: App<Element>) {
  app.use(naive);
}

使用组件,并没有获得提示,使用vue-router的组件就有提示

<template>
  <n-config-provider>
    <router-view />
    <n-button>按钮</n-button>
  </n-config-provider>
</template>

image.png

image.png

使用ts进行模块扩充来获得提示,但是并没有生效

# components.d.ts tsconfig中引入
import { NConfigProvider } from "naive-ui";

declare module "@vue/runtime-core" {
  interface GlobalComponents {
    NConfigProvider: typeof NConfigProvider;
  }
}

export {};

image.png

结果

修改 components.d.ts 修改如下,这次就有了提示

import { NConfigProvider } from "naive-ui";

declare module "vue" {
  interface GlobalComponents {
    NConfigProvider: typeof NConfigProvider;
  }
}

image.png

image.png