技术栈

TS + jsx + h_ui

基于研发中心h_ui 组件库，进行二次开发

组件开发流程

• 所有的组件必须写案例使用文档
• 开发新组件在src/HUI/packages目录下新建文件夹，文件夹命名规则：首字母大小写 + 驼峰命名

project
│   README.md   
│
└───src
│   │   index.js
│   │   style.ts
│   └───CreateBtn
│   │   │   index.ts
│   │   └───src
│   │      │   main.tsx
│   │      │   ...
│   │  ...
│   │
└───examples
    └───docs
    └───.vuepress

**/main.tsx

import {
  Component,
  ClComponent,
  Prop,
  Vue
} from 'src/vue-component'

interface PageProps {
  test: string
}

Component({
  name: 'Page',
  inheritAttrs: false,
  components: {}
})
export default class extends ClComponent<PageProps> {
  @Prop() test!: string
  
  render() {
    return (
      <div>
        <h-page {...{ props: this.$attrs, on: this.$listeners }}></h-page>
      </div>
    ) 
  }
}

Develop

yarn run start
yarn run docs:dev

Usage

引入 @fim3/hfc

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import HfcUI from '@fim3/hfc';
import '@fim3/hfc/lib/hfc-ui.css';
import App from './App.vue';

Vue.use(HfcUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

npm 依赖

项目中使用 @fim3/hfc 组件库需要安装以下依赖包：

"peerDependencies": {
  "element_ui": "^1.28.0",
  "vue-property-decorator": "^9.1.2"
}