[](https://travis-ci.org/ksc-fe/kpc)
[](https://codecov.io/gh/ksc-fe/kpc/branch/master)
[](https://cdn.jsdelivr.net/npm/kpc/dist/)
[](https://cdn.jsdelivr.net/npm/kpc/dist/)
[](https://www.npmjs.com/package/kpc)
[](https://www.npmjs.com/package/kpc)
## 动机
目前市面上已经存在大量组件库，我们为什么还要造这个轮子呢？下面我们解释下这个组件库开发的动机。
随着公司业务和团队的壮大，我们很难统一全公司的技术栈，或者也没有必要统一全公司技术栈，但是统一
全公司所有产品线的设计和交互风格，却是很有必要的。众所周知，前端单页应用的开发无非基于3大框架：
React/Vue/Angular。如果不同框架维护一套自己的组件库，一方面维护成本非常高，存在大量重复劳动力；
另一方面，即使大家都按统一的交互设计稿开发组件库，也很难保证各个组件库设计和交互的完全统一。
这就是我们开发KPC的目的，它存在的意义就是：同一套组件库源码适应不同框架，来保证不同技术栈所开发出来的产品
的风格统一(write once, run anywhere)
## 特性
* 支持多框架 [Intact][1] / [Vue][2] / [React][3] / [Angular][4]
* 完全可自定义的主题系统
* 360°全方位定位系统
* 声明式表单验证
* 完善的文档和单元测试 [文档](https://ksc-fe.github.io/kpc/)
## 浏览器支持
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
## 安装
```shell
npm install kpc --save
```
## webpack配置
### Intact
```js
module.exports = {
...
resolve: {
alias: {
'kpc': 'kpc/@css',
}
}
}
```
### Vue
```js
module.exports = {
...
resolve: {
alias: {
'kpc': 'kpc/@vue/@css',
}
}
}
```
### React
```js
module.exports = {
...
resolve: {
alias: {
'kpc': 'kpc/@react/@css',
}
}
}
```
## 使用
### Intact
```js
import {Button} from 'kpc';
```
### Vue
```js
```
### React
```jsx
import React from 'react';
import {Button} from 'kpc';
class App extends React.Component {
render() {
return
}
}
```
### Angular [详情][5]
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: `