Nacr Design —— 为 Nuxt 而生的企业级 UI 组件库

Nacr Design —— 为 Nuxt 而生的企业级 UI 组件库80 高质量组件 · 内置 ECharts · Markdown 编辑器 · 全量 TypeScript · 一行集成写在前面做 Nuxt 项目的时候你是不是也遇到过这些问题想用一个组件库却发现它没有 Nuxt Module需要手动配置一坨插件想画图表还得自己封装 ECharts、处理 resize 和销毁想要一个 Markdown 编辑器结果要么装一个笨重的第三方方案要么自己从头撸组件库文档简陋类型定义缺失IDE 提示全靠猜Nacr Design就是来解决这些问题的。 这就是 Nacr Design 的文档首页简洁、清爽、一目了然。一行配置开箱即用不需要手动注册组件不需要写一堆 plugin不需要操心 tree-shaking。// nuxt.config.ts export default defineNuxtConfig({ modules: [nacr-design], })就这样80 组件和全套 Composables 自动导入直接在模板里用template NButton variantprimary确定/NButton NInput v-modelvalue label名称 / /template零配置零样板代码这是 Nacr Design 的第一条原则别让开发者做重复的事。图表内置了数据可视化是后台系统的刚需。Nacr Design 内置了NChart组件和useChart组合式函数直接对接 ECharts自带自适应 resize 和实例销毁管理。template NChart :optionchartOption height300 / /template script setup const chartOption ref({ xAxis: { type: category, data: [Mon, Tue, Wed, Thu, Fri] }, yAxis: { type: value }, series: [{ data: [150, 230, 224, 218, 135], type: line }], }) /script不需要手动import * as echarts from echarts不需要处理容器宽度变化不需要在onUnmounted里 dispose——这些useChart全帮你做了。表格企业级的做过后台的人都知道表格永远是需求最复杂的组件。排序、筛选、分页、固定列、可展开行、虚拟滚动……Nacr Design 的NTable一次给你到位。支持树形数据、支持大数据量虚拟滚动、支持列固定和表头固定——导航到文档站的数据展示分类所有 API 和在线示例一应俱全。Markdown 编辑器也内置了是的你没看错。Nacr Design 自带NMdEditor和NMdRender一个编辑一个渲染支持工具栏、实时预览和代码高亮。博客系统、文档站、知识库……凡是需要富文本输入的场景拿来就用不用再纠结选 TinyMCE 还是 tiptap。导航菜单专业级NMenu支持垂直/水平模式、多级子菜单、折叠收起和NLayoutSider配合使用后台管理最常见的侧边栏方案一步到位。不止这些上面展示的只是冰山一角。Nacr Design 还提供分类代表组件基础Button、Icon、Divider、Space、Grid数据录入Input、Select、Cascader、DatePicker、Upload、Form数据展示Table、Tag、Badge、Card、Carousel、Timeline、Statistic导航Menu、Breadcrumb、Steps、Pagination、BackTop反馈Modal、Drawer、Notification、Alert、Progress、Result布局Layout、Grid、Space、Split、OverflowList工具ConfigProvider、Watermark、Trigger、Transfer以及 5 个高频 ComposablesuseToggle— 布尔状态切换useLoading— 异步加载状态管理useMessage— 轻量消息提示useNotification— 通知提醒useChart— ECharts 实例管理全部 TypeScript 编写类型推导完整IDE 体验一流。主题定制CSS 变量 BEM 命名改颜色不用翻源码:root { --n-primary: #1890ff; --n-border-radius: 6px; --n-font-size: 14px; }也可以通过NConfigProvider全局注入主题配置运行时切换暗色模式也不在话下。包体积放心Nacr Design 基于 Nuxt Module 机制组件和 Composables 按需自动导入未使用的代码不会进入最终产物。ECharts 也是按需加载——你只用折线图就不会打包饼图的代码。快速上手# 安装 pnpm add nacr-design// nuxt.config.ts export default defineNuxtConfig({ modules: [nacr-design], })完事。打开浏览器开始写组件。链接 官网文档Nacr Design - 基于 Nuxt 3/4 的企业级 Vue 3 组件库 - Nacr Design npmhttps://www.npmjs.com/package/nacr-design GitHubhttps://github.com/nacrcn/Nacr-Design Giteehttps://gitee.com/wuaxcn/nacr-design写在最后Nacr Design 不是一个又一个 UI 库。它是从一个真实的企业级后台项目中生长出来的——每一个组件都经历了业务需求的打磨每一个 API 都是为了解决实际痛点而设计。如果你在做 Nuxt 项目如果你需要一个开箱即用、类型完备、内置图表和 Markdown 的 UI 方案——试试 Nacr Design一行代码集成剩下的交给它。