Naive Ui Admin

Appearance

Return to top
On this page

组件注册

按需引入

项目通过 unplugin-vue-components + NaiveUiResolver 自动按需引入 Naive UI 组件：模板里直接写 <n-button>、<n-menu> 即可，构建时只打包实际用到的组件与样式，无需手动注册。

相关配置位于 build/vite/plugin/index.ts：

ts
Components({
  resolvers: [NaiveUiResolver()],
  dts: true,
});

开发时会在项目根目录生成 components.d.ts 提供类型提示，该文件不要手动编辑。

3.0.0 变更

3.0.0 起删除了 src/plugins/naive.ts 中的全局注册（此前 66 个组件被整包注册，按需引入实际失效）。不要再使用 app.use(naive)，否则会重新引入整个组件库。

tsx 文件注册

tsx 文件内不能使用模板中的自动按需引入，需要显式导入：

jsx
import { defineComponent } from 'vue';
import { NMenu } from 'naive-ui';

export default defineComponent({
  setup() {
    return () => <NMenu />;
  },
});

手动全局注册（不推荐）

如果确实需要全局注册，可参考 Naive UI 官方文档。注意这会失去按需打包带来的体积收益：

ts
import { createApp } from 'vue';
import naive from 'naive-ui';

const app = createApp(App);
app.use(naive);