Lucky-ui

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   // 快速开始文档

开发 Lucky-ui

添加一个 UI 组件

$ npm run new

运行项目

$ npm run start

模块打包

UMD 模块

$ npm run build:umd

打包后存在在 dist 目录

打包为 ES 模块和 CommonJS 模块

$ npm run build

• ES 模块存放在 esm 目录下
• CommonJS 模块存放在 lib 目录下

提交规范

$ npm run commit

• faet: 提交一个新特性
• fix: 修复一个 bug
• docz: 只更新文档
• style: 调整样式或非逻辑上的调整
• refactor: 重构
• test: 添加/修改测试用例
• build: 调整 script 脚本目录
• ci: 调整配置文件

版本发布

$ npm run release

如何 Lucky-ui 使用

浏览器引入

示例

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';

使用 babel-plugin-import

安装

$ npm i babel-plugin-import

使用

{
  "plugins": [
    [
      "import",
      {
        libraryName: "lucky-ui",
        "style": true, // or 'css'
      }
    ]
  ]
}

国际化

Listen

Lucky-ui is MIT