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

相关推荐
ui设计前端开发老司机1 小时前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX2 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
喜欢敲代码的程序员12 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
Clair-Sean12 小时前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux
海的诗篇_14 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte20 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
Zevalin爱灰灰21 小时前
MATLAB GUI界面设计 第六章——常用库中的其它组件
开发语言·ui·matlab
前端开发与ui设计的老司机1 天前
数字孪生技术引领UI前端设计潮流:增强现实(AR)的集成应用
ui
前端开发与ui设计的老司机1 天前
数字孪生技术为UI前端注入灵魂:实现产品全生命周期的可视化管理
前端·ui·命令模式
共享ui设计和前端开发人才1 天前
UI前端与数字孪生结合探索:智慧建筑的能耗管理与优化
前端·ui·状态模式