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

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

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

项目简介

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

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

安装方式

推荐使用 pnpm 进行安装:

bash 复制代码
pnpm install --save naive-ultra

也可以使用 yarn:

bash 复制代码
yarn add naive-ultra

快速上手

全局引入

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

js 复制代码
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 的自动按需导入,极大减少打包体积。

安装插件
bash 复制代码
npm install -D unplugin-vue-components unplugin-auto-import
Vite 配置示例
ts 复制代码
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 配置示例
js 复制代码
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 提供了更贴合业务的高级用法。下面的代码完全参考官方示例:

html 复制代码
<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 支持一下吧。

相关推荐
前端小趴菜055 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~6 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.6 小时前
serviceWorker缓存资源
前端
RadiumAg7 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo7 小时前
ES6笔记2
开发语言·前端·javascript
yanlele8 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子9 小时前
React状态管理最佳实践
前端
烛阴9 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子9 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端