Naive Ultra：中后台 Naive UI 增强组件库

Naive Ultra：更优雅的 Naive UI 增强组件库

Naive Ultra 是基于 Naive UI 的增强型组件库，专为中后台场景设计，助力企业级应用高效开发。

项目简介

Naive Ultra 是在 Naive UI 基础上进行扩展和增强的组件库，旨在为开发者提供更丰富、更实用的业务组件和工具函数，帮助中后台项目快速落地。

• 🌈 业务组件：涵盖表单、表格、操作栏等常用场景
• ⚡ 按需引入：支持 Vite/Webpack 自动导入
• 🛠️ 类型支持：TypeScript 友好
• 📦 开箱即用：与 Naive UI 无缝衔接

安装方式

推荐使用 pnpm 进行安装：

pnpm install --save naive-ultra

也可以使用 yarn：

yarn add naive-ultra

快速上手

全局引入

适合需要全量使用组件的场景：

import NaiveUltra from 'naive-ultra'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(NaiveUltra)

按需引入（推荐）

推荐使用 unplugin-vue-components 和 unplugin-auto-import 插件，实现组件和 API 的自动按需导入，极大减少打包体积。

安装插件

npm install -D unplugin-vue-components unplugin-auto-import

Vite 配置示例

import NaiveUltraImports from 'naive-ultra/imports'
import NaiveUltraResolver from 'naive-ultra/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [NaiveUltraImports()],
    }),
    Components({
      resolvers: [NaiveUltraResolver()],
    }),
  ],
})

Webpack 配置示例

const NaiveUltraImports = require('naive-ultra/imports')
const NaiveUltraResolver = require('naive-ultra/resolver')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')

module.exports = {
  plugins: [
    AutoImport({
      imports: [NaiveUltraImports()],
    }),
    Components({
      resolvers: [NaiveUltraResolver()],
    }),
  ],
}

组件示例

以表单为例，Naive Ultra 提供了更贴合业务的高级用法。下面的代码完全参考官方示例：

<script lang="ts" setup>
import { defineForm } from 'naive-ultra'
import { ref } from 'vue'

const email = ref('')

const form = defineForm({
  brandNum: {
    type: 'input',
    props: {},
    placeholder: 'Please input brand number',
    value: '',
  },
  email: {
    type: 'input',
    placeholder: 'Please input email',
    value: email,
  },
  time: { type: 'date-picker' },
})
</script>

<template>
  <nu-form :is="form" />
  <pre>{{ JSON.stringify(form.dataTrans, null, 2) }}</pre>
</template>

适用场景

• 需要更丰富业务组件的中后台项目
• 希望提升开发效率、减少重复造轮子的团队
• 追求极致按需引入、优化打包体积的 Vue3 项目

相关链接

• 官网文档：naive-ultra
• GitHub：hairyf/naive-ultra
• NPM：naive-ultra

结语

Naive Ultra 是我在前公司开发的集成框架，现在开源出来了，以前它帮了我很多，让我能在短时间快速重构一整个中后台系统。

另外，说实话，我是比较懒得写文章的，所以上面都是用 AI 生成的，怪不好意思的，建议直接去看官方文档。如果觉得项目不错，那就 Star 支持一下吧。

• github/hairyf
• hairy's blog