技术栈

TS + jsx + h_ui

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

组件开发流程

• 所有的组件必须写案例使用文档
• 开发新组件在src/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 dev
yarn run docs:dev

Usage

完整引入

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

import Vue from 'vue';
import FimHUI from '@fim3/hui';
import '@fim3/hui/dist/fim-hui.css';
import App from './App.vue';

Vue.use(FimHUI);

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

npm依赖

项目中使用fim-hui组件库需要安装以下依赖包：

"peerDependencies": {
  "@fim3/super-request": "^1.0.10",
  "@hui/table": "^1.0.0",
  "h_ui": "^1.28.0",
  "vue-property-decorator": "^9.1.2"
}
项目中无需再import hui from "h_ui/dist/h_ui.min.js", 并可直接使用h_ui的组件