动机

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

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

特性

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

浏览器支持

|
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions

安装

``shell
npm install kpc --save
`

webpack配置

$3

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

$3

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

$3

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

使用

$3

`js
import {Button} from 'kpc';

Hello
`

$3

`js


`

$3

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

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

$3

1. 安装

`shell
npm install kpc-angular -S
`

2. 配置webpack.config.js

Angular CLI 初始化的项目必须使用@angular-builders/custom-webapck来配置webpack

`js
const path = require('path');

module.exports = function(config) {
config.module.rules.find(rule => {
if (rule.test.toString() === '/\\.css$/') {
rule.exclude.push(path.resolve(__dirname, 'node_modules/kpc-angular'));
return true;
}
});

return config;
};
`

3. 使用

src/app/app.module.ts

`ts
import { KpcBrowserModule, KpcModule } from 'kpc-angular';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
KpcBrowserModule,
AppRoutingModule,
KpcModule,
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
`

`ts
import { Component, ViewEncapsulation } from '@angular/core';
import { MessageComponent } from 'kpc-angular';

@Component({
selector: 'app-root',
template:
Hello World
,
style:
.k-button {
margin: 10px;
}
,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
onClick() {
MessageComponent.success('Welcome to kpc world!');
}
}
`

即时反馈

欢迎加入QQ群反馈问题和获得即时帮助，QQ群：529739732

!QQ

链接

* 官方文档
* [Intact MVVM框架][1]
* Vdt 模板引擎
* Intact-Vue 兼容层
* Intact-React 兼容层

常见问题

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

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

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

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

开发

> 需要node@10以及npm@6.9以上

`shell
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


[1]: http://javey.github.io/intact/
[2]: https://vuejs.org/
[3]: https://reactjs.org/
[4]: https://angular.io/
[5]: https://design.ksyun.com/docs/angular/