v0.1.12 已发布

Nacr Design

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

80+ 高质量组件 · ECharts 图表 · TypeScript · 自动导入 · 主题定制

80+组件
10+组合式函数
TS类型完整

组件一览

丰富的组件,覆盖各类业务场景

通用
数据录入
选择
数据展示
主要成功警告危险
5
NLW
72%
用户
12,893
12%
营收
¥89,240
8%
导航
创建
配置
3
完成
概览
设置
日志
反馈
操作成功
请注意
操作失败
75%
60%

核心能力

为现代 Web 应用量身打造

Nuxt 原生

一行配置集成,组件和 Composables 全自动导入,完整 SSR 支持。

TypeScript 优先

完整类型推导,Props 自动补全,开发体验一流。

ECharts 图表

内置 NChart 组件与 useChart 组合式函数,按需加载零配置。

主题定制

CSS 变量架构,覆盖变量即定制主题色、圆角、间距。

组合式函数

useToggle / useLoading / useMessage / useNotification / useChart 等。

Markdown 支持

内置 Markdown 编辑器与渲染组件,适用于文档站、博客场景。

组件分类

按场景划分,快速定位所需组件

极简上手

两步集成,开箱即用

1. 安装
npm install nacr-design
2. 注册模块
// nuxt.config.ts
          export default defineNuxtConfig({
          modules: ['nacr-design']
          })
3. 组件和 Composables 自动导入,直接使用
<template>
        <NButton variant="primary" @click="submit">提交</NButton>
        <NChart :option="chartOption" height="300" />
        </template>

        <script setup>
        const { withLoading } = useLoading()
        const { success } = useMessage()
        async function submit() {
        await withLoading(() => fetch('/api/submit'))
        success('提交成功!')
        }
        </script>

开始构建你的下一个项目

开源免费,MIT 许可 · 欢迎在 Gitee / GitHub 上点亮 Star ⭐