一、安装

以下针对nuxt版本 v3.12.3 文档地址

使用 Nuxt Module

1npm i -D naive-ui 2npm install unplugin-auto-import --save-dev 3npm install unplugin-vue-components -D 4// 根据naive ui 官网步骤 5// https://www.naiveui.com/zh-CN/os-theme/docs/nuxtjs 6pnpm dlx nuxi module add nuxtjs-naive-ui

在 Nuxt 中使用自动引入

同样可以使用 unplugin-auto-import 插件来自动导入 API，使用 unplugin-vue-components 插件来按需自动加载组件。在这种情况下，nuxt.config.ts 会比上面的例子多几行配置。

1import AutoImport from 'unplugin-auto-import/vite' 2import Components from 'unplugin-vue-components/vite' 3import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' 4 5// https://nuxt.com/docs/api/configuration/nuxt-config 6export default defineNuxtConfig({ 7 modules: ['nuxtjs-naive-ui'], 8 vite: { 9 plugins: [ 10 AutoImport({ 11 imports: [ 12 { 13 'naive-ui': [ 14 'useDialog', 15 'useMessage', 16 'useNotification', 17 'useLoadingBar' 18 ] 19 } 20 ] 21 }), 22 Components({ 23 resolvers: [NaiveUiResolver()] 24 }) 25 ] 26 } 27})

二、使用

页面组件中复制按钮代码，粘贴至nuxt页面中 pages/index.vue

1<n-button type="success"> 2 Success 3</n-button>

 

 

此时，页面中已经显示naive ui的按钮样式，这样子就成功了