【九月打卡】第1天 Vue3.0 +TS打造企业级组件库

课程名称：Vue3.0 + TS 打造企业级组件库

章节名称：第4章

讲师姓名：Jokcy

https://coding.imooc.com/learn/list/466.html

课程内容

这一章开始实现使用属性来配置组件的显示也就是SchemaForm的构造，由于SchemaForm有很多表单类型需要区分，所以需要定义一个SchemaItem组件作为中间层组件来嵌入。在定义Form之前首先要定义Schema的Type。

SchemaForm的基本实现如下：

import { defineComponent } from 'vue';
import { Schema, SchemaTypes } from './types'
export default defineComponent({
  props: {
    schema: {
      type: Object as PropType},
    value: {
      required: true
    },
    onChange: {
      type: Function as PropType<(v: any) => void>,
      required: true
    }
  },
  name: 'SchemaForm',
  setup(props, { slots, emit, attrs }) {
    return () => {
      const schema = props.schema
      const type = schema?.type
      switch(type) {
        case SchemaTypes.STRING: {
          return}
      }
      returnThis is Form
}
  }
})

SchemaItem是属于分支管理

在Vue3.1之前steup的API指令还是处于SFC的阶段，如今已经比较广泛的使用起来的。

另外在新版本的monco需要更新webpack插件到monaco-editor-webpack-plugin@1.9.1

课程收获：

学习到了组件数据的转换过程，需要借助编辑editor来实现组件的渲染。

可以使用vue upgrade来更新最新Vue的用法

建议使用独立的type文件来定义需要用到的TS类型。