nacr-design

Nacr Design

基于 Nuxt 3/4 的企业级 UI 组件库

🏠 官网文档 ·

介绍

Nacr Design 是一套为 Nuxt 3/4 打造的企业级 Vue 3 组件库，提供 80+ 高质量组件、丰富的组合式函数和开箱即用的图表能力，助你快速搭建现代化 Web 应用。

👉 在线体验：http://design.nacr.cn/

特性

• Nuxt Module — 一行配置即可集成，组件和 Composables 自动导入
• 80+ 组件 — 涵盖基础、布局、导航、数据录入、数据展示、反馈等场景
• ECharts 图表 — 内置 NChart 组件 + useChart 组合式函数，按需加载
• TypeScript — 完整类型推导，开发体验一流
• Markdown 支持 — 内置 Markdown 编辑器与渲染组件
• 主题定制 — CSS 变量 + BEM 命名，灵活可控
• Tree-shakable — 按需导入，包体积最优

安装

# npm
npm install nacr-design

# pnpm
pnpm add nacr-design

# yarn
yarn add nacr-design

快速开始

在 nuxt.config.ts 中注册模块：

export default defineNuxtConfig({
  modules: ['nacr-design'],

  // 可选配置
  nacrDesign: {
    prefix: 'N',          // 组件前缀，默认 'N'
    global: true,         // 全局注册，默认 true
    iconfontUrl: '',      // Iconfont 图标链接
  },
})

组件自动可用，无需手动 import：

<template>
  <NButton variant="primary">确定</NButton>
  <NInput v-model="value" label="名称" />
  <NChart :option="chartOption" height="300" />
</template>

Composables 也自动导入：

const { state, toggle } = useToggle()
const { loading, withLoading } = useLoading()
const { success, error } = useMessage()
const { info } = useNotification()
const { setOption, resize } = useChart(chartRef)

组件一览

📖 完整文档及在线示例请访问 http://design.nacr.cn/

🎨 基础

✏️ 数据录入

📊 数据展示

🧭 导航

💬 反馈

📐 布局

📝 其他

组合式函数（Composables）

版本管理

本项目使用 Changesets 管理版本和 Changelog。

添加变更记录

每次有意义的改动后，运行：

pnpm changeset

按提示选择变更类型（patch / minor / major）并填写描述。

发布新版本

# 1. 消费所有 changeset，更新版本号并生成 CHANGELOG
pnpm changeset:version

# 2. 构建并发布到 npm
pnpm release

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

# 构建文档站
pnpm build:docs

# 类型检查
pnpm typecheck

贡献

欢迎提交 Issue 和 Pull Request！

链接

• 🏠 官网文档：http://design.nacr.cn/
• 📦 npm 包：https://www.npmjs.com/package/nacr-design
• 🐙 Gitee：https://gitee.com/wuaxcn/nacr-design
• 🐙 GitHub：https://github.com/nacrcn/Nacr-Design

许可

Apache 2.0 + Commons Clause

本项目基于 Apache 2.0 协议开源，并附加 Commons Clause 限制条款：允许商用，但禁止二次封装销售。你可以自由地在商业项目中作为依赖使用，但不得将本库或其衍生作品重新打包、更名后作为独立的 UI 组件库或设计系统进行销售或商业分发。