【Nuxt3】安装 Naive UI 按需自动引入组件

目录

[1. 安装 Naive UI 模块](#1. 安装 Naive UI 模块)

[2. 安装自动按需引入模块](#2. 安装自动按需引入模块)

[3. 项目根目录下新建一个plugins目录,在目录下新建naive-ui.ts,将以下代码复制到naive-ui.ts中](#3. 项目根目录下新建一个plugins目录,在目录下新建naive-ui.ts,将以下代码复制到naive-ui.ts中)

[4. (如未报错则忽略此项) 如果以上代码中process报错,执行下方命令](#4. (如未报错则忽略此项) 如果以上代码中process报错,执行下方命令)

[5.将以下代码复制到项目根目录下的nuxt.config.ts中 (主要查看复制 vite 中配置)](#5.将以下代码复制到项目根目录下的nuxt.config.ts中 (主要查看复制 vite 中配置))

[6. 随便复制 NaiveUI 官网示例代码测试查看效果](#6. 随便复制 NaiveUI 官网示例代码测试查看效果)


1. 安装 Naive UI 模块

复制代码
npm i naive-ui

2. 安装自动按需引入模块

复制代码
npm i unplugin-vue-components

3. 项目根目录下新建一个plugins目录,在目录下新建naive-ui.ts,将以下代码复制到naive-ui.ts中

复制代码
import { setup } from '@css-render/vue3-ssr';
import { defineNuxtPlugin } from '#app';

export default defineNuxtPlugin((nuxtApp) => {
    if (process.server && nuxtApp.ssrContext) {
        const { collect } = setup(nuxtApp.vueApp || {});
        
        // @ts-ignore
        const originalRender = nuxtApp.ssrContext.renderMeta?.bind(nuxtApp.ssrContext) || (() => ({}));
        
        nuxtApp.ssrContext.renderMeta = () => {
            // @ts-ignore
            const result = originalRender();
            // @ts-ignore
            const headTags = result?.headTags || "";
            
            return {
                headTags: headTags + collect()
            };
        };
    }
});

4. (如未报错则忽略此项) 如果以上代码中process报错,执行下方命令

复制代码
npm add @types/node

5.将以下代码复制到项目根目录下的nuxt.config.ts中 (主要查看复制 vite 中配置)

复制代码
// https://nuxt.com/docs/api/configuration/nuxt-config
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';

export default defineNuxtConfig({
    compatibilityDate: '2025-05-15',
    devtools: { enabled: false },
    build: {
        // 配置构建选项
    },
    components: true,
    modules: [
        // 配置使用的 Nuxt.js 模块
    ],
    plugins: [
        // 配置使用的插件
    ],
    router: {
        // 配置路由选项
    },
    vite: {
        plugins: [
            Components({
                resolvers: [NaiveUiResolver()] // 自动注册 components 目录下的组件
            })
        ],
        
        ssr: {
            noExternal: [
                'moment',
                'naive-ui',
                '@juggle/resize-observer',
                '@css-render/vue3-ssr'
            ]
        },
        envDir: '~/env', // 指定环境变量目录
        optimizeDeps: {
            include: ['@vicons/ionicons5']
        }
    }
});

6. 随便复制 NaiveUI 官网示例代码测试查看效果

相关推荐
@AfeiyuO10 小时前
el-table 表格嵌套表格
前端·elementui·vue
飞鸟真人15 小时前
VUE+Electron从0开始搭建开发环境
electron·vue
你的电影很有趣21 小时前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生1 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
Aevget1 天前
界面控件Kendo UI for Angular 2025 Q3亮点 - 全新的AI编码助手
ui·界面控件·kendo ui·ui开发·1024程序员节
weixin_445476681 天前
Vue 项目全局水印功能完整实现指南
vue·vue2·1024程序员节
陶甜也2 天前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs
油炸自行车2 天前
【Qt】VS Code配置Qt UI插件,vscode打开Qt Designer ,vscode打开Qt*.ui文件
qt·ui·cursor·qt designer·vscode插件·trae·qt ui