（可选）开发自定义登录组件

“开发自定义登录组件”步骤可以直接跳过，本示例已为您提供了开发好的自定义登录组件。如果您想要自定义登录组件的开发方法，可参考本章节执行。

自定义登录组件

进入创建“设备维修管理系统”应用中创建的应用。
在左侧资产下的组件模板中，单击“widgetVueTemplate”，再单击“下载”。

图1 下载组件模板
在弹出的窗口中，输入组件名称，并单击“保存”，将组件模板保存到本地，并解压。

图2 输入组件名称
查看解压后的组件目录。

目录结构如图3所示，其中userLogin.js文件是写vue业务逻辑的代码，userLogin.ftl用于写html代码，userLogin.css用于写样式代码，userLogin.editor.js以及packageinfo.json是配置文件。
图3 目录结构

在本地编辑器中打开文件夹，把userLogin.editor.js文件中的config代码改为如下代码，用于配置桥接器。

config: [
                {
                    type: 'connectorV2',
                    name: 'FlowConnector',
                    label: 'Flow Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.GetConnector',
                    label: 'View API Get Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.PostConnector',
                    label: 'View API Post Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.PutConnector',
                    label: 'View API Put Connector',
                    model: 'ViewModel'
                },
                {
                    type: 'connectorV2',
                    name: 'common.DeleteConnector',
                    label: 'View API Delete Connector',
                    model: 'ViewModel'
                },
            ]

把packageinfo.json文件中加入如下加粗内容。

{
    "widgetApi": [
        {
            "name": "userLogin"
        }
    ],
    "widgetDescription": "",
    "authorName": "",
    "localFileBasePath": "",
    "requires": [
        {
            "name": "global_Vue",
            "version": "100.8.3"
        },
        {
            "name": "global_VueI18n",
            "version": "100.7.3"
        },
        {
            "name": "global_Element",
            "version": "101.0.3"
        }
    ]
}

将修改后的组件文件压缩成一个zip包。压缩后，即可根据需要上传到AstroZero，供高级页面使用。

更新自定义组件

当开发的自定义组件功能有变动，即组件代码发生变动后，需要更新组件版本。更新后，组件所在的页面也会随之生效。

在应用中，单击左下方的“页面设置”，再选择“插件”页签，找到需要更新的组件（例如userLogin），单击组件所在行右侧“查看详情”，进入组件详情页。

图4 页面设置下的组件列表

如果页面图标高亮，则需要先单击解锁页面。
单击“更新”按钮进入组件更新页面。

图5 选择更新按钮
单击“上传”，上传本地的组件zip包，再单击“更新”。

图6 上传本地组件包
返回“插件”页签，单击获取锁，再单击刚刚上传组件（userLogin）的升级按钮，然后单击保存升级，最后单击发布即可。

图7 更新组件