A React UI Library
├── CHANGELOG.md // 变更日志
├── README.md
├── components // 组件目录
│ ├── alert // 组件
│ │ ├── alert.tsx
│ │ ├── demo // 组件demo
│ │ ├── index.mdx // docz展示文档
│ │ ├── index.ts // 导出
│ │ ├── interface.ts // 接口文件
│ │ └── style // 组件样式目录
│ ├── index.ts // 导出组件
│ └── style // 通用样式目录
│ ├── components.less
│ ├── entry.less
│ ├── entry.ts // umd打包入口(css)
│ ├── index.less
│ ├── index.ts
│ └── themes // 主题目录
├── doc-comps // docz展示通用组件
├── doczrc.js // docz 配置文件
├── gulpfile.js // gulp
templates // 组件快速创建模板
├──── component
│ ├── comp.hbs
│ ├── demo
│ ├── doc.hbs
│ ├── index.hbs
│ ├── interface.hbs
│ └── style
├── scripts // 脚本目录
│ ├── build.umd.js // umd打包脚本
│ └── release.ts // npm包发布脚本
└── src // docz配置目录
├── gatsby-theme-docz
│ ├── components
│ └── theme
└── quick-start.mdx // 快速开始文档
$ npm run new
$ npm run start
$ npm run build:umd
打包后存在在 dist
目录
$ npm run build
-
ES
模块存放在esm
目录下 -
CommonJS
模块存放在lib
目录下
$ npm run commit
-
faet
: 提交一个新特性 -
fix
: 修复一个 bug -
docz
: 只更新文档 -
style
: 调整样式或非逻辑上的调整 -
refactor
: 重构 -
test
: 添加/修改测试用例 -
build
: 调整 script 脚本目录 -
ci
: 调整配置文件
$ npm run release
示例
import { Alert } from 'lucky-ui';
ReactDOM.render(<Alert />, mountNode);
引入样式
import 'lucky/dist/lucky.css';
我们推荐使用 npm
或 yarn
的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。
$ npm install lucky-ui --save
$ yarn add lucky-ui
import { Alert } from 'lucky-ui';
import 'lucky-ui/esm/alert/style';
安装
$ npm i babel-plugin-import
使用
{
"plugins": [
[
"import",
{
libraryName: "lucky-ui",
"style": true, // or 'css'
}
]
]
}
Lucky-ui is MIT