项目结构

    |-- src
    |   |-- assets # 静态资源
    |   |-- components # 公共组件封装
    |   |-- constant # 常量声明
    |   |-- directive # 自定义指令
    |   |-- hooks	# 自定义hooks封装
    |   |-- utils	# 工具类封装
    |   |-- widget	# 组件开发目录
    |       |-- form	# 表单组件开发目录
    |       |   |-- Text	# 演示demo
    |       |       |-- config.json	# 组件配置（必须）
    |       |       |-- index.js	# 组件导出（必须）
    |       |       |-- mobile					
    |       |       |   |-- index.vue		
    |       |       |-- pc							
    |       |       |   |-- index.vue
    |       |       |-- sub	# 子表单组件 
    |       |           |-- index.vue
    |       |-- page	# 门户组件开发目录
    |           |-- PageComponentDemo
    |           |   |-- config.json # 组件配置（必须）
    |           |   |-- index.js	# 组件导出（必须）
    |           |   |-- mobile
    |           |   |   |-- index.jsx
    |           |   |   |-- index.scss
    |           |   |-- pc
    |           |       |-- index.jsx
    |           |       |-- index.scss
    |-- vite	# vite配置
    |-- web 	# 设计器lib

widget 目录作为组件开发的主要目录，该目录下 page 、 form 目录分别对应的门户组价和表单组件。

单个组件目录结构（组件开发的接口目录门户和表单都一致）

• config.json为组件配置文件，在这里配置组件的名称名称、类型、版本、配置项目等信息。
• mobile移动端组件，当渲染环境为移动端时则会引用该组件。
• pcPC端组件，跟移动端原理一致。
• index.js在这里导出组件，并配置版本信息。