A component library written in Intact for Intact, Vue, React and Angular
npm install mh-kpc
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
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';
`
$3
`js
`
$3
`jsx
import React from 'react';
import {Button} from 'kpc';
class App extends React.Component {
render() {
return
}
}
`
$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:
,
style:
,
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
``