@aimake/nanod
Version:
## 设计模式 NANO DESIGN 是面向于企业级中台化应用的解决方案。服务于 ToB 和 ToE 类型的单页应用,应用于各产品中从而产出了一套设计及前端规范。
52 lines (38 loc) • 1.95 kB
Markdown
# Nano Design
## 设计模式
NANO DESIGN 是面向于企业级中台化应用的解决方案。服务于 ToB 和 ToE 类型的单页应用,应用于各产品中从而产出了一套设计及前端规范。
## 简介
Nano Design 是 NANO 设计风格 的 React 实现,用于开发和服务企业级后台产品。
Nano Design 基于 antd 组件库,是 antd 组件的**超集**。包含了 antd 提供的基础组件,以及符合业务的业务性组件。
## 特性
完美继承 antd 的换肤方案和按需加载
## 目录结构
```
- components/
- **/ <-- 存放自开发组件
- nanoReset.less <-- Nano 样式提取样式变量
- dist/
- nanod.xxx/ <-- 全量包
- demo/ <-- 测试 Demo 页面
- lib/ <-- 所有组件平铺目录(构建自动生成)用于按需加载
- tools/ <-- gulp 脚本,构建命令
- vendor/ <-- 第三方包目录
```
## 构建命令
- npm run clean 清理构建目录,./lib ./dist
- npm run init-antd 初始化所有 antd 组件,并构建至 ./lib 目录中
- npm run compile 编译自有组件,并构建至 ./lib 目录中
- npm run build 构建自开发组件和antd组件,并打包 至 dist
## 发布
修改 package.json
> "version": "0.0.12",
执行 `npm publish`
## API
### NanoLayout
Nano 风格的 Layout 组件,继承于 Layout,具体文档请参照 [Layout](https://ant.design/components/layout-cn/#header),
相较于 Layout,封装了自己的 Logo 组件,
| 参数 | 说明 | 类型 | 默认值 |
| :-------- | :--------| :------ | :------: |
| logo | 产品 logo 的 url | string | '' |
| title | 产品文字 | string \| ReactNode \| () => ReactNode | '' |
> <Logo logo="//gw.alicdn.com/mt/TB1J7tGdXOWBuNjy0FiXXXFxVXa-72-72.png" title="智能风控" />