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

76 阅读2分钟

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-componentsunplugin-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 是我在前公司开发的集成框架,现在开源出来了,以前它帮了我很多,让我能在短时间快速重构一整个中后台系统。

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