skyformat99 / kpc

A UI components library for Intact, Vue and React.

动机

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

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

特性

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

安装

在Intact下

npm install intact kpc --save

webpack配置

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

在Vue下

npm install kpc intact intact-vue --save

webpack配置

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

在React下

npm install kpc intact intact-react --save

webpack配置

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

使用

在Intact下

import {Button} from 'kpc';

<Button>Hello</Button>

在Vue下

<template>
    <Button>Hello</Button>
</template>
<script>
import {Button} from 'kpc';

export default {
    components: {
        Button
    }
}
</script>

在React下

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

class App extends React.Component {
    render() {
        return <Button>Hello</Button>
    }
}

链接

• 官方文档
• Intact MVVM框架
• Vdt 模板引擎
• Intact-Vue 兼容层
• Intact-React 兼容层

常见问题

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

许可

MIT