伴着公司业务发展,开源的组件库已无法满业务需要,搭建一套更适合公司业务的UI组件库,势在必行,目前市面上有很多功能强大且完善的组件库,比如基于react的开源组件库antDesign
,vue的开源组件库elementUI
等。
cdn
弥补,需要更轻量级组件antDesign
圣诞节彩蛋的suprise
github
并发布到npm
上打包组件库工具有很多
rollup
,打包js利器,非常轻量,集成tree-shaking
create-react-app/vue-cli3
,可快速改造一个组件库的脚手架
webpack
自行封装
umi/father
,基于rollup和babel组件打包功能,集成docz的文档,支持TypeScript等
可以看到基础UI组件是原子组件,作为各种复杂组件的重要组成部分,只有组件的颗粒度足够细,才能满足业务组件使用,区块组件是我们把相同的业务结合基础UI组件进行封装。
这样一套完整的组件化系统就完成了,其中各个组件之间关系是单向的,业务组件只能包含基础UI组件,不能包含区块组件,区块组件里由基础UI组件和业务组件组成。
我们的基础UI组件库可以参考目前非常流行的UI组件库antd
,划分为:通用、布局、导航、数据录入、数据展示、反馈、其他
具体如下:
StoryBook是React
,Vue
和Angular
最受欢迎的UI组件开发工具。它可以在隔离的环境中开发和设计应用程序;也可以那个使用它来快速构建UI
组件的文档
安装
yarn add @storybook/react // package.json设置scripts "scripts": { "storybook": "start-storybook -p 8000" } 复制代码
创建文件例如:Button.stories.js
import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import Button from './button' import '../../styles/index.scss' const defaultButton = () => ( <Button onClick={action('clicked')}> default button </Button> ) const buttonWithSize = () => ( <> <Button size="lg"> large button </Button> <Button size="sm"> small button </Button> </> ) const buttonWithType = () => ( <> <Button btnType="primary"> primary button </Button> <Button btnType="danger"> danger button </Button> <Button btnType="link" href="https://www.baidu.com"> link button </Button> </> ) storiesOf('Button Component', module) .add('Button', defaultButton) .add('不同尺寸的 Button', buttonWithSize) .add('不同类型的 Button', buttonWithType) 复制代码
集成了docz
文档功能,一个开箱即用的组件库打包工具,省去了很多配置工作。docz文档
在package.json
配置github
地址
"repository": { "type": "git", "url": "https://github.com:riyue/zhixing.git" } 复制代码
首先在npm
官网注册账号,然后执行如下命令,也可发布到自己团队私服上
// 输入用户名和密码 npm adduser // 发布 npm publish 复制代码
至此整个组件系统设计思路介绍完毕,在开发中一些细节没有展开叙述,例如:整个组件系统全局主题色配置、单元测试、代码规范检查等,需要大家在实践中去发现问题并解决问题。
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !来自 “开源独尊 ” ,链接: https://ym.baisou.ltd/post/863.html
|