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 variant="primary">确定</NButton>
<NInput v-model="value" label="名称" />
</template>零配置，零样板代码，这是 Nacr Design 的第一条原则：别让开发者做重复的事。
图表？内置了
数据可视化是后台系统的刚需。Nacr Design 内置了 NChart 组件和 useChart 组合式函数，直接对接 ECharts，自带自适应 resize 和实例销毁管理。
<template>
<NChart :option="chartOption" height="300" />
</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 个高频 Composables：
useToggle--- 布尔状态切换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
- 📦 npm：https://www.npmjs.com/package/nacr-design
- 🐙 GitHub：https://github.com/nacrcn/Nacr-Design
- 🐙 Gitee：https://gitee.com/wuaxcn/nacr-design
写在最后
Nacr Design 不是一个"又一个 UI 库"。
它是从一个真实的企业级后台项目中生长出来的------每一个组件都经历了业务需求的打磨，每一个 API 都是为了解决实际痛点而设计。
如果你在做 Nuxt 项目，如果你需要一个开箱即用、类型完备、内置图表和 Markdown 的 UI 方案------
试试 Nacr Design，一行代码集成，剩下的交给它。