介绍

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';
<Button>Hello</Button>

2、Vue

<template>
 <Button>Hello</Button>
</template>
<script>
import {Button} from 'kpc';
export default {
 components: {
 Button
 }
}
</script>

3、React

import React from 'react';
import {Button} from 'kpc';
class App extends React.Component {
 render() {
 return <Button>Hello</Button>
 }
}

组件截图预览

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

• 按钮

• 级联选择器

• 代码编辑器（微软Monaco Editor）

• 日期及区间选择器

• 模态对话框

• 抽屉组件

支持上下左右

• 表单

• 栅格

• 布局

这是其中一种

• 消息提示

• 分页

分页可指定大小

• 进度条

• 星级评分

• 滚动选择框

• 表格组件

表格组件功能超级丰富

• 选项卡

• 穿梭

• 树状组件

• 文件上传组件

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

KPC主题定制工具

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

总结

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

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