步骤一：获取自定义组件模板包

为了增强标准页面组件的丰富性，华为云Astro轻应用为您提供了一个自定义组件模板workCards.zip，您可以基于该模板包自定义标准页面组件。开发标准页面组件前，请先了解自定义组件模板包的结构及定义规范，便于快速上手。

1. 单击链接，获取华为云Astro轻应用自定义组件模板workCards.zip。
2. 解压获取的workCards.zip包，了解自定义组件模板包的结构及定义规范。
   图1 workCards.zip模板包结构
   

   表1 workCards.zip模板包目录及文件说明

   目录及文件	说明
   build	用于存放组件的打包脚本。
   dist	组件打包文件目录，文件打包后生成于此目录下。
   preview	组件预览文件夹。
   src	组件的主文件夹，组件的内容位于此文件夹中。 本实践中，自定义组件仅涉及修改“src\components\workCards”目录下的内容，详细介绍请参见表2。
   .gitignore	Git的忽略文件。
   .npmrc	设置package.json中依赖包的安装源。
   package.json	项目的依赖文件。
   package-lock.json	用于锁定依赖文件的安装版本号。
   README.md	项目提示文件，用于编写对该组件的描述。
   vite.config.js	Vite的配置文件。

   图2 src\components\workCards目录结构
   

   表2 src\components\workCards目录结构说明

   目录及文件	说明
   design-time	开发态组件文件目录。
   static	静态文件目录。
   cube.svg/workCards.svg	业务中使用的图标。
   index.js	组件主入口文件。
   workCards.json	组件的描述文件，用于自定义组件配置面板的规格，即校验和辅助编写自定义组件配置面板的JSON文件。workCards.json文件的编写需遵循JSON Schema规范，以便与主流的编辑器（如vscode、atom、sublime text、webstorm）集成。 workCards.json可以在插件包开发时修改，也可以在插件包编译后修改，编译前workCards.json文件存放在“src\components\workCards”目录下（如图3），编译后“dist\components\workCards”目录下（如表3）。
   workCards.vue	组件的主文件。

   图3 编译前workCards.json文件所在位置
   
   图4 编译后workCards.json文件所在位置
   

   表3 workCards.json参数说明

   参数	说明
   name	组件的名称，此处配置的名称主要用于后台元数据的存储和解析等。 长度不能超过64个字符，必须以英文字母开头，只能由英文字母、数字和特殊字符（_和-）组成。建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。 组件的名称会存放在界面元数据的type中，如type: "my-component1"。 zip包的名称应该和此处name的取值保持一致，例如name设置为imgbutton，zip包名必须为imgbutton.zip。
   title	组件别名会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。 取值范围：1~100个字符。
   description	组件的描述信息，即当鼠标悬停在组件上时，展示的组件描述信息。 取值范围：1~200个字符。
   category	组件的分类，为了保持界面构建器组件分类的一致性，请使用华为云Astro轻应用提供的组件分类，具体分类如表4所示。
   icon	组件的图标，分为未选中时和选中时两个，必须为png格式，且每个png的大小不能超过16KB。
   其他	用于定义包大小，编译后的组件包大小不能超过1MB。

   表4 华为云Astro轻应用组件分类

   分类	说明
   navigation	导航组件，如菜单、工具栏或侧边栏。
   data	数据组件，可以查看和编辑应用程序中的数据，例如Form、Table或List。
   common	通用组件，如标签、图片、标题或段落。
   container	容器组件，即包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。
   input	显示和编辑实体属性，如文本框、日期选择器。
   file	文件处理组件，例如文件上传下载组件、图片浏览组件或PDF预览组件。
   button	触发动作的按钮，如保存按钮、页面跳转按钮。
   report	聚合数据并以表格或图表的形式显示，如图表、透视表。
   widget	业务卡片。
   add-on	扩展组件。