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

相关推荐
白玉cfc14 小时前
【iOS】网易云仿写
ui·ios·objective-c
小马哥编程18 小时前
如何解决 undetected_chromedriver 启动慢问题
chrome·selenium·ui
帧栈1 天前
开发避坑短篇(6):Vue+Element UI 深度选择器实现表单元素精准对齐的技术实践
vue.js·ui·elementui
吗喽对你问好1 天前
Android UI 控件详解实践
android·ui
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
梦想改变生活2 天前
《Flutter篇第一章》基于GetX 和 Binding、Dio 实现的 Flutter UI 架构
flutter·ui·架构
unicrom_深圳市由你创科技2 天前
Unity 的UI动画调节
ui·unity·游戏引擎
界面开发小八哥2 天前
界面控件DevExpress WPF v25.1新版亮点:模板库更新升级
ui·.net·wpf·界面控件·devexpress·ui开发
程序员小远2 天前
Pytest+Selenium UI自动化测试实战实例
自动化测试·软件测试·python·selenium·测试工具·ui·pytest
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发