开发指导 AUI为内部开源使用，外部无法访问，底层逻辑使用Vue组件暴露封装，因此在不使用AUI情况下，通过原生Vue CLI脚手架搭建组件库形式暴露卡片组件，也能够正常使用。 开发过程 准备工作中已经正常安装了Vue CLI脚手架，因此可以快速搭建Vue项目。 初始化Vue项目。 vue

查看更多 →

ntui.zip，获取该组件包。 返回环境配置，选择“维护 > 全局元素 > 页面资产管理 > 组件”，单击“提交新组件”，将自定义组件包上传至组件库。 图4 上传组件 表2 上传自定义组件参数说明 参数 说明 示例 名字 新提交组件的名称，系统会根据组件包名称自动填充。 widgetdemomintui

查看更多 →

以在不同页面不同子系统中，复用同样的逻辑和功能了。 通过Webpack进行组件打包构建成为独立JS。 独立JS能够被懒加载。 在管理页面进行卡片创建，上传管理。 创建卡片实例，关联独立JS包，进行版本控制。 父主题： 卡片配置指南

查看更多 →

}) 将修改后的组件Widget包，重新打包。 参考开发高级组件中操作，将高级页面组件包上传至组件库中，在页面上中添加该高级页面组件。 当高级页面中拖入widget_demo_mintui高级页面组件后，即可在“页面设置 > 资源”中发现Vue库和MintUI库已加载，表示引用成功。

查看更多 →

将修改后的组件Widget包，重新打包。 返回AstroZero管理中心，选择“应用管理 > 页面资产管理 > 组件”，单击“提交新组件”，将3中的组件包上传至组件库中。 表2 上传组件参数说明 参数 说明 名字 组件名称，系统会根据组件包名称自动填充。 上传图标 组件的显示图标，本示例不配置。

查看更多 →

}) 将修改后的组件Widget包，重新打包。 返回AstroZero环境配置，选择“维护 > 全局元素 > 页面资产管理 > 组件”，单击“提交新组件”，将3中的组件包上传至组件库中。 图3 上传组件 表2 上传组件参数说明 参数 说明 名字 组件名称，系统会根据组件包名称自动填充。

查看更多 →

资产ID，前缀不可编辑，上传组件包后会自动填写。 分类 组件所属分类，上传组件后，该组件将会在页面的该分类下进行展示。 领域 组件包应用的领域，一般保持默认“通用”。 场景 组件包的应用场景。 高级页面：组件适用于高级页面开发场景。 标准页面：组件适用于标准页面开发场景。 业务大屏：组件适用于Astro

查看更多 →

将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板，在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库，并在高级页面中使用。 本章节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。参考消费者业务网站（如图1所示

查看更多 →

关闭Vue3框架渲染组件开关 本案例所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图1 界面报错 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在

查看更多 →

新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。 本

查看更多 →

将修改后的组件Widget包，重新打包。 返回AstroCanvas界面，选择“我的资产 > 我的组件”，单击“添加组件”，将3.d中的组件包上传至组件库中。 图3 上传组件 组件名称：组件名称，系统会根据组件包名称自动填充。 操作类型：当前操作的类型，如新增、更新等。 组件ID：资

查看更多 →

在开发高级页面过程中，可以使用预置的组件，快速构建页面；也可以自定义组件构建页面。 开发自定义组件时，可以根据组件功能下载组件模板进行开发。 组件模板名称 功能 widgetVueTemplate 当自定义组件需要使用Vue库时，请选用该模板。 widgetPropertyTemplate 当自定义组件需要通

查看更多 →

绑定事件 在中心画布中选中按钮组件。 在右侧属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击OnClick事件。 在弹框中输入方法名称，例如handleOnClick。 图1 事件绑定 单击“确定”，弹出JS面板。 在JS面板中编写代码。 代码示例：

查看更多 →

使用JS面板 在常规代码开发中，您需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。 很多时候您需要自定义一些方法去复用一些逻辑，也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。

查看更多 →

工作原理 微前端采用的无界方案，利用“iframe”来实现js沙箱能力，下面详细介绍： 应用加载机制和js沙箱机制 将子应用的js注入主应用同域的“iframe”中运行，“iframe”是一个原生的window沙箱，内部有完整的history和location接口，子应用实例in

查看更多 →

内。 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。 表1 组件包文件说明 目录/文件 是否可选 描述 custom-property-editor/index.js 可选

查看更多 →

js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时需要渲染的界面和逻辑。“.editor.

查看更多 →

调试工具 Vue Devtools是一个专为Vue.js开发者设计的浏览器扩展。它提供了一系列强大的功能，帮助开发者更容易地调试和优化他们的Vue应用程序。 Vue Devtools 以下是Vue Devtools的主要特点和功能： 组件树查看：允许用户查看完整的Vue组件层次结构

查看更多 →

包含云服务组件包，须手工加载云服务组件包。 操作步骤 访问华为安全智能中心（ 域名 为isecurity.huawei.com），选择“特征库升级 > 特征库升级”。筛选到对应的产品和版本。 下载安全云服务组件包文件。 请注意系统软件版本和组件包版本的配套关系，不配套的组件包无法加载

查看更多 →

下载安全云服务组件包文件。 请注意系统软件版本和组件包版本的配套关系，不配套的组件包无法加载成功，仅支持云管模式的防火墙型号会在华为安全智能中心显示“安全云服务”的页签。 图1 下载安全云服务组件包 上传云服务组件包。 假设存在一个 FTP服务器 ，将下载的云服务组件包存放到FTP 服务器 的目录下。

查看更多 →

js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时需要渲染的界面和逻辑。“.editor

查看更多 →