formily学习篇1(新手上路)

formily 作为阿里巴巴出品的开源作品，自然也备受瞩目，尤其是想要作低码平台的更是必不可少的、但是鉴于目前公司大家主技术栈都是vue！而官方设计器为react，所以打算学习一下大神是怎么实现的

首先当然是取代码咯！github

git clone https://github.com/alibaba/designable.git

打开项目，安装依赖 yarn install

然后启动 yarn workspace @designable/formily-antd run start

启动成功

代码目录结构

目前我们启动的是完整版本formily/antd 、打开之后发现渲染代码是放在playground中，以此类推主要代码肯定在main.ts中、目前我们只关注最左侧的表单与中间区域的处理

       // 左侧表单
      <ResourceWidget
              title="sources.Inputs"
              sources={[
                Input,
                Password,
                NumberPicker,
                Rate,
                Slider,
                Select,
                TreeSelect,
                Cascader,
                Transfer,
                Checkbox,
                Radio,
                DatePicker,
                TimePicker,
                Upload,
                Switch,
                ObjectContainer,
              ]}
            />

        // 渲染
         <ViewportPanel style={{ height: '100%' }}>
            
              <ViewPanel type="DESIGNABLE">
                {() => (
                  <ComponentTreeWidget
                    components={{
                      Form,
                      Field,
                      Input,
                      Select,
                      TreeSelect,
                      Cascader,
                      Radio,
                      Checkbox,
                      Slider,
                      Rate,
                      NumberPicker,
                      Transfer,
                      Password,
                      DatePicker,
                      TimePicker,
                      Upload,
                      Switch,
                      Text,
                      Card,
                      ArrayCards,
                      ArrayTable,
                      Space,
                      FormTab,
                      FormCollapse,
                      FormGrid,
                      FormLayout,
                      ObjectContainer,
                    }}
                  />
                )}
              </ViewPanel>

              {/* json展示 */}
              {/* <ViewPanel type="JSONTREE" scrollable={false}>
                {(tree, onChange) => (
                  <SchemaEditorWidget tree={tree} onChange={onChange} />
                )}
              </ViewPanel> */}
              
              {/* 
              <ViewPanel type="MARKUP" scrollable={false}>
                {(tree) => <MarkupSchemaWidget tree={tree} />}
              </ViewPanel> */}
              <ViewPanel type="PREVIEW">
                {(tree) => <PreviewWidget tree={tree} />}
              </ViewPanel>
            </ViewportPanel>