年轻人的第一个组件库 - Bougie Design

作者: Bougie 创建于: 2019-04-05 | Design React

V83J91.png

两个周末的时间做了这个简单的组件库,麻雀很小,五脏也不俱全 😅 ,但是估计以后也不会花时间做这个了。第一是因为没时间做,第二是做了也不会有人用(包括我自己) 🤣 。特在此对该组件库弃笔之前做一篇记录。

预览地址:Bougie Design

风格

现在 web 组件库基本上快分为两大阵营了,分别是阿里的 Ant Design 和 Google 的 Material Design。这两种风格我都很喜欢 😄 ,都非常适合 ToB 的无需极力表面品牌特征的系统,两者做一些结合有时也能有更好的效果。此外,还有夹缝中的 Story Book 风格,不过 Story Book 就偏花哨一些了。

参考链接:

本组件库风格模仿的主要是 Ant Design 风格。

配色

V83NjK.png

Ant Design 风格的组件库,你基本找不出一个主色调不是蓝色的。本组件库也不例外,以上就是用到的一些颜色,和 Ant Design 有一些小偏差,但是不影响整体观感。

动画

我强迫症晚期,所有动画曲线必须是 300ms ease ,可以自行看预览地址体会。虽说Ant Motion定义了一大堆动画原则,但我都觉得没有 300ms ease来的简单、流畅、直接、迅速、舒服,简单粗暴好用的动画就是 300ms ease

...(此处省略其它风格说明)

构建

开发环境

当然是用 Webpack 了,把所有组件集中在一个页面方便开发时查看即可。

linter

  • tslint
  • stylelint 不推荐用上面两个了,用 ESLint 配一配插件就可以了。

build components

将 TS 代码编译成 ES5 代码,本组件库用的是 TSC。此外,用了一些 shell 脚本修正 import 样式路径不正确的问题

发布

  1. 添加 .npmignore
  2. build components
  3. npm add user
  4. npm publish

Installation

use yarn

yarn add bougie-design

use npm

npm i bougie-design -S
上次更新: 2019-6-2 12:13:03