Mh kpc

A component library written in Intact for Intact, Vue, React and Angular

Version: 1.2.0 Updated: 11/05/2019

By: mighoocool License: MIT

Install

npm i mh-kpc
yarn add mh-kpc

Repository: https://github.com/mighoocool/kpc

CDNs

bundle.run: https://bundle.run/mh-kpc

jsDelivr: https://cdn.jsdelivr.net/npm/mh-kpc

unpkg: https://unpkg.com/mh-kpc

动机

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

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

特性

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

浏览器支持

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

安装

npm install kpc --save

webpack配置

Intact

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

Vue

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

React

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

使用

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>
    }
}

Angular 详情

  1. 安装
npm install kpc-angular -S
  1. 配置webpack.config.js

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

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;
};
  1. 使用

src/app/app.module.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 { }
import { Component, ViewEncapsulation } from '@angular/core';
import { MessageComponent } from 'kpc-angular';

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

即时反馈

欢迎加入QQ群反馈问题和获得即时帮助,QQ群:529739732 KPC官方交流群

QQ

链接

常见问题

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

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

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

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

开发

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

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

Contributors



mighoocool
commits

DevDependencies


Categories: Vue js