@ncom/all

New Component（ncom）全量入口包：聚合 组件、核心、主题、国际化与路由扩展，基于原生 Web Components（Custom Elements + Shadow DOM），可在 Vue、React、原生 HTML 等任意前端栈中以标准自定义标签使用。

特性

• 标准 Web Components：自定义元素 + Shadow DOM，样式与 DOM 边界清晰
• 跨框架：不绑定特定框架，标签即组件
• TypeScript：完整类型导出，便于 IDE 提示
• 一站式：组件 + 基类 + 主题 + i18n + 路由工具统一从本包引入
• 主题可切换：内置 dark / white / deepblue / purple 等主题样式

安装

pnpm add @ncom/all
# 或
npm install @ncom/all
# 或
yarn add @ncom/all

快速开始

1. 引入主题（必选其一）

import "@ncom/all/theme/dark";
// import "@ncom/all/theme/white";
// import "@ncom/all/theme/deepblue";
// import "@ncom/all/theme/purple";

主题 CSS 已打进 @ncom/all，无需再单独安装 @ncom/theme。HTML 中也可直接引用包内 dist/theme/ncom-*.css。

2. 引入并使用组件

import "@ncom/all"; // 注册全部自定义元素

// 或按需从命名导出使用类型 / 工具
import { NComponent, defineComponent } from "@ncom/all";

<nc-button type="primary">按钮</nc-button> <nc-input placeholder="请输入"></nc-input>

导入 @ncom/all（或其命名导出中的组件模块）时，内置组件会通过 defineComponent 完成注册，之后即可在页面中使用 nc-* 标签。

3. 编写自定义组件

import { NComponent, defineComponent } from "@ncom/all";

class Hello extends NComponent {
  template() {
    return `<h2>Hello New Component</h2>`;
  }
}

defineComponent("my-hello", Hello);

<my-hello></my-hello>

使用说明摘要

| 能力 | 说明 | | ------ | ------------------------------------------------------------------------------------ | | 基类 | 继承 NComponent，实现 template()，用 defineComponent(tag, Class) 注册 | | 样式 | 组件内 import css from "./style.scss?inline"，在 constructor 中 this.addCss(css) | | 插槽 | 标准 slot / <slot name="..."> | | 表达式 | 属性中用 {}，如 total={500}、@nc-change={this.onChange} | | 事件 | 组件事件以 nc- 开头，模板中 @nc-click={this.handler}；原生事件用 @click |

详细约定（生命周期、表达式规则、事件修饰符等）见官网文档。

包内容

@ncom/all 聚合并再导出以下能力：

| 能力 | 来源包 | 说明 | | ------- | ------------------ | ------------------------------------------- | | UI 组件 | @ncom/components | nc-button、nc-form、nc-table 等 | | 核心 | @ncom/core | NComponent、defineComponent、工具与事件 | | 扩展 | @ncom/extensions | Router、createRoutes、navigate 等 | | 国际化 | @ncom/locale | i18n、createI18n | | 主题 | @ncom/theme | CSS 打进包内，用 @ncom/all/theme/* 引入 |

也可按需单独安装上述子包；大多数业务场景直接使用 @ncom/all 即可。

内置组件一览

常见标签（不完全列表，以官网与类型导出为准）：

通用 / 布局：nc-button、nc-icon、nc-divider、nc-layout、nc-row / nc-col、nc-split-panel、nc-card、nc-collapse、nc-waterfall、nc-breadcrumb、nc-empty、nc-skeleton、nc-watermark

表单：nc-input、nc-checkbox、nc-radio / nc-radio-group、nc-switch、nc-select、nc-cascader、nc-datepicker、nc-timepicker、nc-slider、nc-range、nc-upload、nc-form / nc-form-item、nc-color-picker、nc-ranking、nc-tree-select

数据展示：nc-table、nc-complext-table、nc-tree、nc-tabs、nc-pagination、nc-progress、nc-badge、nc-tag、nc-steps、nc-timeline、nc-transfer、nc-statistic、nc-calendar、nc-carousel、nc-menu

反馈 / 浮层：nc-alert、nc-message / Message、nc-notification、nc-modal、nc-drawer、nc-popover、nc-popconfirm、nc-popmenu、nc-tooltip、nc-loading、nc-tour

路由相关：nc-router、nc-route

主题入口

| 导入路径 | 说明 | | -------------------------- | ---- | | @ncom/all/theme/dark | 深色 | | @ncom/all/theme/white | 浅色 | | @ncom/all/theme/deepblue | 深蓝 | | @ncom/all/theme/purple | 紫色 |

模块格式

| 格式 | 路径 | 说明 | | ----- | ------------------------ | ---------------------------------------- | | ESM | dist/es/index.js | 默认 main / module，推荐打包工具使用 | | Types | dist/types/index.d.mts | TypeScript 类型 | | UMD | dist/umd/index.js | 浏览器 / 非模块环境（全局名：ncom） |

package.json 的 exports 已配置主入口与主题子路径，建议通过包名导入，避免手写深层路径。

脚手架

快速创建基于 ncom 的工程：

npm i ncom-cli -g
# 或见
# https://www.npmjs.com/package/ncom-cli

文档与仓库

• 官网：http://ncom.lab209.com
• GitHub：https://github.com/fieldyang/ncom
• Gitee：https://gitee.com/weblabsw/ncom

浏览器支持

需支持 Custom Elements v1 与 Shadow DOM v1，例如：

Chrome 60+、Firefox 63+、Safari 10.1+、Edge 79+

License

MIT