kpc 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
kpc 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
kpc 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开源组织
地区 国产
投 递 者 JaveyZ
适用人群 未知
收录时间 2018-12-14

软件简介

动机

目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。

随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司技术栈。众所周知, 前端单页应用的开发无非基于3大框架:React/Vue/Angular。如果不同框架维护一套自己的组件库,一方面 维护成本非常高,存在大量重复劳动力;另一方面,即使大家都按统一的交互设计稿开发组件库,也很难保证 各个组件库交互和设计的完全统一。所以这时kpc应运而生,它存在的意义就是:同一套组件库适应不同框架 (Write once, run anywhere)

特性

  • 支持多框架 Intact / Vue / React

  • 完全可自定义的主题系统

  • 360°全方位定位系统

  • 声明式表单验证

  • 完善的文档和单元测试 文档

安装

在Intact下

npm install intact kpc --save

在Vue下

npm install kpc intact intact-vue --save

webpack配置

module.exports = {
    ...
    resolve: {
        alias: {
            'intact$': 'intact-vue',
        }
    }
}

在React下

npm install kpc intact intact-react --save

webpack配置

module.exports = {
    ...
    resolve: {
        alias: {
            'intact$': 'intact-react',
        }
    }
}

使用

在Intact下

import {Button} from 'kpc';Hello

在Vue下

    Helloimport {Button} from 'kpc';

export default {
    components: {
        Button
    }
}

在React下

import React from 'react';
import {Button} from 'kpc';

class App extends React.Component {
    render() {
        return Hello    }
}

链接

常见问题

1. 使用兼容层来兼容不同的框架,是否有性能损失?

性能损失非常小,因为兼容层并不会出来太多的东西,仅仅只是完成不同框架执行上下文的切换,唯一带来的损失 可能是框架需要引入兼容层和Intact底层库所带来的打包文件的增大,但只是增大了大概80KB(没有开启gzip)的体积, 相比目前前端项目动辄几M的打包文件,增大的并不多

2. 兼容层能实现100%的兼容吗?

如上所述,兼容层仅仅完成上下文的切换,本质上还是谁的元素谁去渲染,所以理论上能实现100%的兼容, 但目前考虑到实际使用情况并没有实现100%兼容,有些注意事项已在文档中说明,如果有需求后面我们会 逐步完善来达到100%兼容性

开发

git clone https://github.com/ksc-fe/kpc.git
cd kpc
npm install
npm run dev:doc

# 测试
npm run test
# 更新测试快照
npm run snapshot
# 部署文档
npm run deploy:doc
# 发版
npm run release
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(7) 发布并加入讨论🔥
发表了资讯
2023/10/26 16:40

Kingcloud Design v3 发布,更专业,更具活力的组件库

很高兴跟大家宣布,Kingcloud Design进入v3.0时代,该版本技术侧变动不大,设计侧对组件UI/UE进行了打磨,致力于呈现出更专业,更具活力的设计系统。欢迎大家尝鲜,那些还在使用1.0的同学,该抓紧升级啦~ Kingcloud Design(原名kpc)是金山云出品的前端组件库,支持React/Vue2/Vue3 变更日志 全局变更 全局样式变更,更显年轻活力 组件变更 Copy Add 新增Copy组件,用于复制文本 Popover Add 新增Popover组件,用于弹出确认框,...

1
1
发表了资讯
2022/04/28 18:03

kpc 2.0 正式更名为 King Design,发布正式版

经过1年多的时间,KPC组件库完成了TypeScript的重构工作,重构的过程中,我们也进一步打磨组件,引入更流畅的动效,也支持了最新的框架React17 / React18(WIP) / Vue2 / Vue3。另外,除了组件库外,我们还提供了从”产品“到”设计“再到”开发“和最后”验收“各个阶段的一条完成的工具链,现在我们正式更名为King Design对外发布,欢迎大家尝试由金山云打造的这一套完整的设计开发解决方案。 官网:https://design.ksyun.com/...

3
9
发表于大前端专区
2020/07/10 14:36

kpc v1.4.1 发布,支持多框架的前端组件库

KPC是个支持多框架的前端组件库,这次升级主要是优化了一些细节问题 发布日志 v1.4.1 Add Slider marks支持分别设置常态和选中状态文案 #491 Add Tooltip支持设置size属性,来控制弹层的padding #498 Add Form支持设置size属性,来控制FormItem的间距 #499 Add Datepicker / Timepicker支持直接输入日期和时间 #494 Add 现在Tooltip的箭头showArrow,会根据位置动态调整,而非此前只能居中展示,否则隐藏 #502 Add Slider / Sp...

0
4
发表于大前端专区
2020/06/28 17:13

KPC v1.4.0,支持多个前端框架的 UI 组件库

KPC组件库发布了1.4.0版本,这次放出了设计资源,供UE/UI的同学快速设计原型和设计稿,有需要的同学可以访问https://design.ksyun.com/docs/resources/ 进行下载 另外表格加入了拖动排序的功能 更多更新请参阅发布日志 v1.4.0 Add Table支持行拖拽排序 #482 Add DropdownItem即使被其它元素包裹,依然可以在focus的时候自动滚动到可视区域 #487 Add Select支持在菜单中展示搜索框,并且支持Checkbox的“全选”,“反选”,“清空...

0
21
发表于大前端专区
2019/12/20 17:10

kpc v1.3.0 发布,新增绘图组件 Diagram

KPC组件库1.3.0版本,新增了一个绘图组件Diagram,该组件基于强大的mxGraph开发,可以绘制流程图,拓扑图等 <Diagram> <DTreeLayout type="vertical"> <DRectangle label="<h1>hello</h1>" key="1"></DRectangle> <DDiamond key="2" label="world" /> <DCircle key="3" label="kpc" /> <DLine from="1" to="2" type="rounded" /> <DLine from="1" to="3" type="rounded" /...

0
18
发表于大前端专区
2019/11/25 17:12

kpc v1.2.1 发布,新增拾色器组件,细节优化

KPC是金山云开发的一套前端组件库,它使用内部框架Intact开发,但是支持在Vue/React/Angular下使用,真正做到跨技术栈所开发的产品界面和交互的统一。组件库内置了两套主题:default(偏现代的风格),ksyun(小清新的风格)。你可以根据需要切换不同的主题 本次更新主要新增拾色器组件:Colorpicker (Sketch的交互风格),并优化了诸多细节 更新日志 v1.2.1 Add Select支持position属性来定义弹出菜单的位置 #383 Add Spinner...

0
5
发表于大前端专区
2019/10/25 15:43

KPC v1.2.0 发布,新增 Angular 框架支持

经过1个多月的适配,kpc组件库终于支持Angular了,标志着kpc已全面支持3大框架。各个框架下,一致的交互体验,一致的设计风格,一致的开发体验,小伙伴们快来尝新吧~ 发布日志 v1.2.0 Add 支持Angular框架 Add Input在设置了suffix图标,同时支持清除clearable时,可以通过stackClearIcon属性来堆叠清除按钮在suffix图标上,而非并排展示,以此节省空间 #366 Add Tabs在卡片模式下,新增切换动画 #369 Add Dialog新增width属性...

2
6
发表于大前端专区
2019/08/30 14:36

KPC v1.1.2 发布,支持 React New Context Api

跨框架的前端组件库KPC v1.1.2发布,主要加入了React 16 New Context Api的支持,同时修复了一些小问题 发布日志: v1.1.2 Add Dialog新增强制关闭事件terminate和回调方法terminate属性 #347 Add Dialog新增escClosable属性,用于指定是否可以按ESC键关闭弹窗,非confirm类型的快捷弹窗现在不允许ESC关闭 Change 在多Dialog情况下,按ESC键一个一个地关闭弹窗,而非一次性全部关闭 #348 Fix 修复Checkbox/Radio在Mac版Firefox...

5
3
发表于大前端专区
2019/08/20 17:00

kpc 组件库 v1.1.1 发布,上线主题制作工具

kpc是金山云推出的前端组件库,设计之初就支持灵活的主题定制,并且组件库本身就内置了两套主题,如今上线了在线主题定制工具,方便大家自定义自己的主题。示例主题Material-UI 该版本主要补全了Table的功能,新增了行提示和树形表格 发布日志 Add Code代码编辑器worker支持跨域加载 #312 Add Tooltip支持disabled禁用提示 #337 Add Table支持行提示 #335 Add Table支持树形表格展示 #260 Add Datepicker和Timepicker支持格式化...

5
22
发表于大前端专区
2019/07/17 16:12

支持多框架的组件库 KPC 1.0 正式发布

自从17年11月份对外公布以来,KPC已经经过了8个月的迭代,期间发布了几十个正式版本,但一直没有到1.0,因为我们觉得1.0是个里程碑版本,我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布:KPC 1.0终于来了! 其实距离0.0.1的发布,到现在已经1年多了,但是KPC并没有收货太多的关注,伴随着一个接一个的小版本迭代,github上星星的数量也不紧不慢地突破100大关。但我们并没有放弃对KPC的细心呵护,每一次star,每一...

0
17
发表于大前端专区
2019/05/07 11:51

kpc v0.8.9 发布,支持多框架的前端组件库

kpc是金山云前端团队推出的跨框架的组件库解决方案,目前支持金山云内部框架Intact,以及流行的Vue/React。开发该组件库的目的是,希望通过一套组件库来满足不同团队之间不同的技术栈的开发需求,同时相比维护针对各个框架开发一套各自的组件库而言,可以将维护成本将至最低,且可以做到各个框架同步更新 在现有的Vue后者React中引入该组件库只需要配置一项webpack的alias即可,详见文档说明 更新日志 v0.8.9 Core Add 新增分割...

0
10
发表于大前端专区
2019/03/22 11:02

kpc v0.8.6 发布,支持多框架的组件库

kpc是金山云前端团队推出的跨框架的组件库解决方案,目前支持金山云内部框架Intact,以及流行的Vue/React。开发该组件库的目的是,希望通过一套组件库来满足不同团队之间不同的技术栈的开发需求,同时相比维护针对各个框架开发一套各自的组件库而言,可以将维护成本将至最低,且可以做到各个框架同步更新 在现有的Vue后者React中引入该组件库只需要配置一项webpack的alias即可,详见文档说明 新增功能点介绍 幽灵按钮(ghost) ...

0
5
发表于大前端专区
2019/03/05 10:50

跨框架组件库解决方案 kpc v0.8.4 发布,新增评分组件 Rate

kpc是金山云前端团队推出的跨框架的组件库解决方案,目前支持金山云内部框架Intact,以及流行的Vue/React。开发该组件库的目的是,希望通过一套组件库来满足不同团队之间不同的技术栈的开发需求,同时相比维护针对各个框架开发一套各自的组件库而言,可以将维护成本将至最低,且可以做到各个框架同步更新 在现有的Vue后者React中引入该组件库只需要配置一项webpack的alias即可,详见文档说明 Vue CLI 3 在项目根目录下创建vue.c...

1
4
发表于大前端专区
2019/02/18 14:55

kpc v0.8.3发布,跨框架的组件库解决方案

kpc是金山云前端团队推出的跨框架的组件库解决方案,目前支持金山云内部框架Intact,以及流行的Vue/React。开发该组件库的目的是,希望通过一套组件库来满足不同团队之间不同的技术栈的开发需求,同时相比维护针对各个框架开发一套各自的组件库而言,可以将维护成本将至最低,且可以做到各个框架同步更新。 v0.8.3主要新增布局组件Layout,该组件支持常见的后端页面布局方式,并且如果需要固定侧边栏或者顶栏,无需额外定义定义...

0
5
发表于大前端专区
2019/01/29 17:13

KPC 0.8.2发布,跨框架前端组件库

KPC 是金山云前端团队推出的跨框架前端组件库解决方案,目的是通过一套源码运行在各个框架下,目前支持 Vue/React 两大框架。 本次更新日志如下: Core Add 内置主题ksyun支持再次继承,不会再因为重新定义了$theme-dir而导致部分样式丢失 #193 Change Dialog弹出位置优化,以前为垂直居中弹出,现在弹出位置向上偏移 #207 Fix 修复Spinner当父元素设置了line-height后,布局错位的问题 #206 Fix 修复Table当固定了列时,loadi...

3
11
发表于大前端专区
2019/01/24 00:52

kpc v0.8.1 React完善版发布,前端多框架组件库

kpc是金山云前端团队开发的支持多框架的前端组件库,如果你的团队同时存在Vue和React技术栈,想找一个适合多个框架的组件库,来保持界面风格统一,kpc是你的不二选择。当然即使没有跨技术栈的需求,kpc本身也是个高质量的组件库,有着丰富的组件和完善的文档,并且内置了两套主题风格供用户选择,相信它能为你带来更好的开发使用体验 本次更新主要是修复React下的使用问题,我们将所有示例加入了React的单元测试,借此来保证Rea...

0
5
发表于大前端专区
2019/01/08 11:52

kpc v0.8.0发布,支持多框架的前端组件库

kpc是一个由金山云前端团队开发的支持多框架的前端组件库,目前支持Intact/Vue/React。它可以让你的团队不同技术栈之间开发出来的产品保持设计交互统一 v0.8.0 更新日志 Table支持导出成csv格式并下载 Core Add TableColumn支持className属性,用于给当前列所有单元格添加class来控制列样式 #164 Add Table支持导出表格内容成csv格式并下载,而且支持自定义表格数据进行全量导出 #171 Add 新增Icon组件,统一字体图标使用方式 ...

7
8
发表于大前端专区
2018/12/27 19:12

kpc v0.7.10 发布,支持多框架的前端组件库

kpc是一个支持多框架的前端组件库,旨在使用一套组件库源码满足Intact/Vue/React框架的开发需求,使不同技术栈、不同团队之间,所开发的产品的设计和交互统一 更新日志 Refactor 升级babel@7进行构建,自动引入实例方法polyfill,提高兼容性 #157 Add 新增React开始文档,以及Vue组件使用文档(React组件使用文档还在撰写中...) Add Tree在过滤时,默认展开匹配的节点 #156 Fix 修复Collapse默认主题下没有折叠展开动画的问题 ...

0
3
发表于大前端专区
2018/12/14 17:54

kpc v0.7.8 发布,同时支持 Vue/React/Intact 的前端组件库

动机 目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。 随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司技术栈。众所周知, 前端单页应用的开发无非基于3大框架:React/Vue/Angular。如果不同框架维护一套自己的组件库,一方面 维护成本非常高,存在大量重复劳动力;另一方面,即使大家都按统一的交互设计稿开发组件库,也很难保证 各个组件...

0
16
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
7 评论
60 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部