导入ant-design-vue，未能正常显示

[jeff10101111]

一：问题现象

导入ant-design-vue，参照文档：https://opentiny.design/tiny-engine#/help-center/course/engine/15

配置组件配置components、组件面板配置snippets,但是未能正常显示。

以按钮来说，先主要表现两个：

1. 设计器展示时，没有正常展示

正常应该如图：

未能正常：

2. 出码没有导代码

二：改动文件

改动bundle.json
packages\design-core\public\mock\bundle.json

1. components处

"components": [
       ....
        {
          "id": 111,
          "version": "4.1.2",
          "name": {
            "zh_CN": "按钮"
          },
          "component": "AButton",
          "icon": "button",
          "description": "常用的操作按钮",
          "doc_url": "",
          "screenshot": "",
          "tags": "",
          "keywords": "",
          "dev_mode": "proCode",
          "npm": {
            "package": "ant-design-vue",
            "version": "4.1.2",
            "script": "https://npm.onmicrosoft.cn/[email protected]/dist/antd.esm.js",
            "css": "https://npm.onmicrosoft.cn/[email protected]/dist/reset.min.css",
            "dependencies": [ 
              "https://unpkg.com/dayjs/dayjs.min.js",
              "https://unpkg.com/dayjs/plugin/customParseFormat.js",
              "https://unpkg.com/dayjs/plugin/weekday.js",
              "https://unpkg.com/dayjs/plugin/localeData.js",
              "https://unpkg.com/dayjs/plugin/weekOfYear.js",
              "https://unpkg.com/dayjs/plugin/weekYear.js",
              "https://unpkg.com/dayjs/plugin/advancedFormat.js",
              "https://unpkg.com/dayjs/plugin/quarterOfYear.js"
            ],
            "exportName": "AButton"
          },
          "group": "基础组件",
          "category": "ant-design-vue",
          "configure": {
            "loop": true,
            "condition": true,
            "styles": true,
            "isContainer": false,
            "isModal": false,
            "isPopper": false,
            "nestingRule": {
              "childWhitelist": "",
              "parentWhitelist": "",
              "descendantBlacklist": "",
              "ancestorWhitelist": ""
            },
            "isNullNode": false,
            "isLayout": false,
            "rootSelector": "",
            "shortcuts": {
              "properties": ["type", "size"]
            },
            "contextMenu": {
              "actions": ["copy", "remove", "insert", "updateAttr", "bindEevent", "createBlock"],
              "disable": []
            },
            "invalidity": [""],
            "clickCapture": true,
            "framework": "Vue"
          },
          "schema": {
            "properties": [
              {
                "name": "0",
                "label": {
                  "zh_CN": "基础属性"
                },
                "content": [
                  {
                    "property": "size",
                    "label": {
                      "text": {
                        "zh_CN": "size"
                      }
                    },
                    "description": {
                      "zh_CN": "尺寸"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "defaultValue": "default",
                    "widget": {
                      "component": "MetaSelect",
                      "props": {
                        "options": [
                          {
                            "label": "large",
                            "value": "large"
                          },
                          {
                            "label": "default",
                            "value": "default"
                          },
                          {
                            "label": "small",
                            "value": "small"
                          }
                        ]
                      }
                    }
                  },
                  {
                    "property": "type",
                    "label": {
                      "text": {
                        "zh_CN": "type"
                      }
                    },
                    "description": {
                      "zh_CN": "类型"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaInput",
                      "props": {}
                    }
                  },
                  {
                    "property": "plain",
                    "label": {
                      "text": {
                        "zh_CN": "plain"
                      }
                    },
                    "description": {
                      "zh_CN": "是否为朴素按钮"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "text",
                    "label": {
                      "text": {
                        "zh_CN": "text"
                      }
                    },
                    "description": {
                      "zh_CN": "是否为文字按钮"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "bg",
                    "label": {
                      "text": {
                        "zh_CN": "bg"
                      }
                    },
                    "description": {
                      "zh_CN": "是否显示文字按钮背景颜色"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "link",
                    "label": {
                      "text": {
                        "zh_CN": "link"
                      }
                    },
                    "description": {
                      "zh_CN": "是否为链接按钮"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "round",
                    "label": {
                      "text": {
                        "zh_CN": "round"
                      }
                    },
                    "description": {
                      "zh_CN": "是否为圆角按钮"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "circle",
                    "label": {
                      "text": {
                        "zh_CN": "circle"
                      }
                    },
                    "description": {
                      "zh_CN": "是否为圆形按钮"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "loading",
                    "label": {
                      "text": {
                        "zh_CN": "loading"
                      }
                    },
                    "description": {
                      "zh_CN": "是否为加载中状态"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "type": "string",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  },
                  {
                    "property": "disabled",
                    "label": {
                      "text": {
                        "zh_CN": "disabled"
                      }
                    },
                    "description": {
                      "zh_CN": "是否禁用"
                    },
                    "required": true,
                    "readOnly": false,
                    "disabled": false,
                    "cols": 12,
                    "labelPosition": "top",
                    "defaultValue": false,
                    "type": "boolean",
                    "widget": {
                      "component": "MetaSwitch",
                      "props": {}
                    },
                    "device": []
                  }
                ],
                "description": {
                  "zh_CN": ""
                }
              }
            ],
            "events": {},
            "slots": []
          }
      }
     ...
]

2. snippets处

"snippets": [
...

{
          "group": "Ant Design of Vue",
          "children": [
            {
              "name": {
                "zh_CN": "按钮"
              },
              "icon": "button",
              "screenshot": "",
              "snippetName": "AButton",
              "schema": {
                "children": [
                  {
                    "componentName": "Text",
                    "props": {
                      "text": "按钮文本"
                    }
                  }
                ]
              }
            }
          ]
        }
...
]

三：问题

1. 如何ant-design-vue
2. ant-design-vue需要有依赖，如何引入

  <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
  <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>

3. 或者做一个ant-design-vue导入示例

[chilingling]

一、预览态
我看了下， ant-design-vue 中 a-button 的导出名是 Button

改下导出名就可以了

预览态：

二、出码

出码需要使用 pnpm splitMaterial 和 pnpm buildMaterial 进行物料的拆分和构建（方便注入到数据库中），这样在出码的时候，才能拿到对应的无聊配置

[jeff10101111]

可以了，谢谢