1.0.0 • Published 2 years ago
kedesign v1.0.0
贝壳 B 端基础组件库
kedesign
是基于 Ke Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
kedesign和antd
kedesign
在antd的基础上做了二次开发,组件的api和antd3+版本保持一致,交互样式遵循的是ke Design的设计规范。 目前主要服务于贝壳内部,贝壳同学可以通过内网访问ked官网查看组件用法。
使用安装
npm install --save kedesign
使用示例
import { DatePicker } from 'kedesign';
ReactDOM.render(<DatePicker />, mountNode);
引入全量样式:
import 'kedesign/dist/ked.css';
按需加载
使用 babel-plugin-import。
import { Button } from 'kedesign'
配置 .babelrc 或者 babel-loader
{
"plugins": [
["import", { "libraryName": "kedesign", "style": true }]
]
}
然后只需从 ked 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
import { DatePicker } from 'kedesign';
手动引入
import DatePicker from 'kedesign/es/date-picker'; // 加载 JS
import 'kedesign/es/date-picker/style';// 加载 LESS
使用全量的 css 和 js 文件
- js 文件
kedesign/dist/ked.min.js
- css 文件
kedesign/dist/ked.min.css
自定义主题
自定义主题需要用到 less 变量覆盖功能,可以利用了 less-loader 的 modifyVars
来进行主题配置,变量和其他配置方式可以参考 配置主题 文档。
开发指南
本地启动服务
需要先编译一下构建脚本(只需执行一次)
npm run compile:build
启动本地服务 需要先编译一下构建脚本
npm run start
本地构建打包
需要先编译一下构建脚本(只需执行一次)
npm run compile:build
本地构建
// 本地构建产物
npm run build:lib
// 本地构建站点
npm run build:site
License
1.0.0
2 years ago