介绍

KPC，全称King design Public Components，即可以将它理解成是一个组件框架，也可以称其为一门通用设计语言（King Design），它为前端多框架提供了高质量的组件库，一起来看看吧！

官网

https://design.ksyun.com/

https://github.com/ksc-fe/kpc

King Designer

① 节省设计和构建模块的时间；

② 网站变更时节省时间，复用的模式更新时将在任何使用的地方自动更新，重复工作浪费的时间越少，就有更多时间做有价值的事；

③ 更快的发布产品，现成的模式库缩短了新功能设计研发上线时间；

④ 品牌统一性、视觉一致性、提升团队协作效率，不用每次重新创造。

为什么会出现KPC

KPC的作者为我们说明了了一个设计并开发出KPC的动机：

目前市面上已经存在大量组件库，我们为什么还要造这个轮子呢？下面我们解释下这个组件库开发的动机。随着公司业务和团队的壮大，我们很难统一全公司的技术栈，或者也没有必要统一全公司技术栈，但是统一全公司所有产品线的设计和交互风格，却是很有必要的。众所周知，前端单页应用的开发无非基于3大框架： React/Vue/Angular。如果不同框架维护一套自己的组件库，一方面维护成本非常高，存在大量重复劳动力；另一方面，即使大家都按统一的交互设计稿开发组件库，也很难保证各个组件库设计和交互的完全统一。这就是我们开发KPC的目的，它存在的意义就是：同一套组件库源码适应不同框架，来保证不同技术栈所开发出来的产品的风格统一(write once, run anywhere)

KPC特性

支持多框架 Intact / Vue / React
完全可自定义的主题系统
360°全方位定位系统
声明式表单验证
完善的文档和单元测试文档

浏览器兼容性

同时支持IE以及其它主流的浏览器，如Chrome、火狐、Opera、Safari等，其中IE支持最低到IE10

安装使用

当然是使用npm包管理

npm install kpc --save

webpack配置

1、Intact

module.exports = {
 ...
 resolve: {
 alias: {
 \'kpc\': \'kpc/@css\',
 }
 }
}

2、Vue

module.exports = {
 ...
 resolve: {
 alias: {
 \'kpc\': \'kpc/@vue/@css\',
 }
 }
}

3、React

module.exports = {
 ...
 resolve: {
 alias: {
 \'kpc\': \'kpc/@react/@css\',
 }
 }
}

暂时并不支持Angular，但是要造也是能造出来的！

使用

1、Intact

import {Button} from \'kpc\';

2、Vue

3、React

import React from \'react\';
import {Button} from \'kpc\';
class App extends React.Component {
 render() {
 return 
 }
}

组件截图预览

本文将截取部分组件截图，以便于对其有简单的认识：

按钮

级联选择器

代码编辑器（微软Monaco Editor）

日期及区间选择器

模态对话框

抽屉组件

支持上下左右

表单

栅格

布局

这是其中一种

消息提示

分页

分页可指定大小

进度条

星级评分

滚动选择框

表格组件

表格组件功能非常丰富

选项卡

穿梭

树状组件

文件上传组件

功能丰富，支持拖拽上传等

KPC主题定制工具

KPC提供了在线主题定制工具，可以根据需要自行定制：

总结

KPC的出现可以解决项目中不同前端技术栈的兼容问题，有效的避免因为技术栈导致的各类问题，如果你的项目存在此问题，可以尝试使用KPC，Enjoy it！

笔者在学习中收集了一些学习资料，可供参考，如果你有什么需要也可以在评论区留言，私信回复‘book’，可以获取程序员专属学习Book，方向涉及C/C 、Java、Android、设计模式、Python、Linux以及前端等，Enjoy it！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/16762.html