【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 官网示例代码测试查看效果

相关推荐
孟意昶1 天前
Spark专题-第三部分:性能监控与实战优化(1)-认识spark ui
大数据·数据仓库·sql·ui·spark·etl
ikun778g1 天前
uniapp设置安全区
前端·javascript·vue.js·ui·uni-app
SEO-狼术2 天前
Telerik UI for ASP.NET MVC 2025 Q3
ui·asp.net·mvc
llm2009092 天前
UI自动化框架之Selenium八大元素定位(二)
selenium·ui·自动化
时光追逐者2 天前
一款专门为 WPF 打造的开源 Office 风格用户界面控件库
ui·开源·c#·.net·wpf
YH丶浩2 天前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
2025年一定要上岸3 天前
【日常学习】UI自动化自定义异常类
运维·ui·自动化
Larry_Yanan3 天前
QML学习笔记(十五)QML的信号处理器(MouseArea)
c++·笔记·qt·学习·ui
Larry_Yanan3 天前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
Larry_Yanan3 天前
QML学习笔记(十四)QML的自定义模块
开发语言·笔记·qt·学习·ui