README
Digitalcnzz-WebUI(UI组件库)
安装
使用 npm
npm install @digitalzz/webui --D
使用 yarn
yarn add @digitalzz/webui
如何使用
- 全部引入
import React from "react";
import { Button } from "@digitalzz/webui";
import "@digitalzz/webui/dist/@digitalzz/webui.min.css";
const App = props => {
return <Button type="success">digitalzz-webui</Button>;
};
export default App;
- 按需引入
import Button from "@digitalzz/webui/es/button";
import "@digitalzz/webui/es/button/style.less";
// 单独使用在.babelrc.js中配置
module.exports = {
plugins: [
["import", {
"libraryName": "@digitalzz/webui",
"libraryDirectory": "es",
"style": true'
},'@digitalzz/webui'],
]
}
// 多个组件库,例如antd
module.exports = {
plugins: [
["import", {
"libraryName": "@digitalzz/webui",
"libraryDirectory": "es",
"style": true
},'@digitalzz/webui'],
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
},'antd'],
]
}
- 配合 create-react-app 使用按需加载
在babel-loader的options中配置如下
options: {
plugins: [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
style: true
},'antd'],
["import", {
"libraryName": "@digitalzz/webui",
"libraryDirectory": "es",
"style": true
},'@digitalzz/webui'],
定制主题
- Digitalzz-webui 使用 less 作为样式开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。 以下是一些最常用的通用变量
@primary-color: #31c27c; //全局色
@warning-color: #fca130; //警告色
@error-color: #f93e3e; //失败色
@success-color: #35C613; //成功色
@info-color: #61affe; //信息展示色
@default-color: #d9d9d9; //默认色
@border-color: #e8e8e8; //边框颜色
@border-radius: 4px; //边框圆角
@font-size: 14px; //默认组件字体大小
@font-size-small: 12px; //小字体
@font-size-large: 16px; //大字体
@bg-color: #FAFAFA; //组件背景色
@font-color: rgba(0, 0, 0, .65); //字体颜色
@disabled-font-color: fade(@font-color, 30%); //禁用字体颜色
- 主题定制原理上是使用 less 提供的 modifyVars 的方式进行覆盖变量。使用 webpack 中配置 less-loader 的 options。注意 javascriptEnabled 要打开。
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
+ options: {
+ modifyVars: {
+ 'primary-color': '#1DA57A',
+ 'info-color': '#1DA57A',
+ 'font-size': '12px',
+ // or
+ 'hack': `true; @import "your-less-file-path.less";`, // 或者引用本地样式文件覆盖
+ },
+ javascriptEnabled: true,
+ },
}],
}],
}
注意,定制主题后，less-loader 的处理范围不能过滤掉 node_modules 下的 @digitalzz/webui 包。
国际化
Digitalzz-webui 提供了一个 React 组件 LocaleProvider 用于全局配置国际化文案。目前的默认文案是中文，如果需要使用其他语言，可以参考下面的方案。
import { LocaleProvider } from "@digitalzz/webui";
import zhCN from "@digitalzz/webui/es/locale/lang/zh_cn";
return (
<LocaleProvider locale={zhCN}>
<App />
</LocaleProvider>
);
开发组件
请首先安装 node(>=12.20.0),npm
- 安装依赖
git clone git@codeup.aliyun.com:60c866ebba7762d30bcb7604/digitalcnzz-fe/digitalcnzz-products-fe/digitalcnzz-web-ui.git
cd digitalcnzz-web-ui
npm install --registry https://registry.npm.taobao.org
- 调试组件，组件库提供两种方案
1.第一种
源码中搭建了一个react环境，在example文件夹下，使用npm run dev，即可打开调试环境，引入编写的组件即可.
2.第二种(完善中)
源码中搭建了一套组件库的文档部署环境，使用命令npm run storybook，即可进入文档模式，引入编写的组件即可.
import { Button, Tabs } from "../../src";
import '../components/button/style.less';
- 开发一个组件 以 Button 组件为例子 cd components 目录下，新建文件夹 button,在下面创建 Button.js,index.js,style.less 三个文件夹
例如 Button.js
创建button.js;
const Button = props => {
return <div>button</div>;
};
export default Button;
在components文件夹下index.js中导出该组件;
export { default as Button } from "./button";
4.发布
框架提供了自动化发布命令，打包，发版，lint,日志等功能，命令如下
npm run pub:prod //自动完成css，js,es,lin,umd打包，自动生成changelog,发布npm仓库，为修订版版本号。1.0.*
npm run pub:major //都会完成上述不同，唯一区别是，打的npm版本号不同，此命令是打主版本号，不经常用 *.0.0
npm run pub:minor //都会完成上述不同，唯一区别是，打的npm版本号不同，此命令是打次版本号，不经常用 1.*.0
发布组件库文档，框架提供两种方式
1.执行npm run pub:docs //采用storybook的方式去发布
2.npm run deploy //该命令会执行脚本deploy.sh文件，打包并发布组件库文档