ll-123 v2.0.0
linglong-ui
Getting Started
Install dependencies
$ yarn
Start the dev server
$ yarn start
Build documentation
$ yarn docs:build
Build library via father-build
$ yarn build
开发环境
node:14.12.0
代码规范
编码规范按之前约定的Web编码规范V1.0和工程内的lint工具,保持 lint 工具开启
组件约定
antd 组件
antd 组件只需要书写文档:
button └─index.md
组件实体由 index.tsx 导出:
// src/index.ts
export {Input} from 'antd';
自定义组件
在主题配置修改之外,仍需对组件样式、交互(组件层面)做修改的,需要新增一个组件单元,并增加LL
前缀;比如LLButton
组件的目录:
ll-button ├─index.md ├─index.ts ├─ll-button.tsx ├─ll-button.less └─ll-button.d.ts
组件书写方式
组件推荐使用 function + hook 形式组织
说明编写
在组件文件夹下编写index.md
提供了一个脚本供使用,方便从antd组件demo说明中提取demo、替换文本、插入index.md的操作:
- 拷贝antd/components下目标组件的
index.zh-CN.md
、demo
目录到linglong-ui的src
下 - yarn demo:build --demo=button (此时docs绝大部分工作完成了,有问题再手动修改)
- 检查docs是否运行正常
css
使用引入式的方式 import './button.less'
组件类命由三部分组成
- 项目前缀:
linglong
- 组件前缀:
button
- 当前类名:
cotainer
可以通过 less mixin或者 classnames实现
git 组件创建流程
develop 拉取组件分支 --> feature/ll-button --> 开发完成 --> request-merge 到 develop(是否需要评审)
Less 变量设置
自定义变量以 @linglong-custom-
开头
Preview Site
- layout 控制 Preview Site 的基本样式
- 如需更改 Preview Site 样式可以依次更改 variable.less -> layout.less | markdown.less
Component Theme
- 大部分都可通过
src/antd-custom.less
进行更改变量即可
部署
docs部署
访问地址:http://10.40.152.129:10091/
两种部署方式:
已接入质效平台,项目地址, 构建后可直接部署在
T1(10.40.152.129)
上。ssh登录T1,手动部署到
/data/base/static/linglong-ui-lib/
目录下
Axure & Sketch Resources
Axure & Sketch resources url path:
- /docs/Home/downloadConfig.ts
- /src/resources/Resources/downloadConfig.ts