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-components
和 unplugin-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
- GitHub:hairyf/naive-ultra
- NPM:naive-ultra
结语
Naive Ultra 是我在前公司开发的集成框架,现在开源出来了,以前它帮了我很多,让我能在短时间快速重构一整个中后台系统。
另外,说实话,我是比较懒得写文章的,所以上面都是用 AI 生成的,怪不好意思的,建议直接去看官方文档。如果觉得项目不错,那就 Star 支持一下吧。