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

查看更多 →

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

查看更多 →

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

查看更多 →

// 组件包说明文件 组件zip包的目录及文件的名称不能是中文，且编译后的组件包大小应在1M以内。 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。 表1 组件包文件说明

查看更多 →

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

查看更多 →

发行说明 组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

在页面开发中，通过两个自定义组件（标签页组件、详情展示组件）实现上述场景，其中标签页组件包含产品类别（手机、笔记本、平板等），详情展示组件用于展示不同产品类别的图片信息。两个组件通过事件和动作机制实现交互，在标签页组件中注册标签切换事件，此事件绑定详情展示组件中切换产品图片的动作。

查看更多 →

新建并开发自定义组件 背景信息 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。 场景描述 本节以开发网站中常用的标签切换页面为例，向您介绍如何基于组件模板在线开发组件。如图1

查看更多 →

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

查看更多 →

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

查看更多 →

lobal_Vue”的，需要写在“global_Vue”之后。依赖关系的详细介绍，请参见如何引入第三方库。 在“widget_demo_i18n.js”的render方法中，使用平台提供的“HttpUtils.getI18n”方法返回一个“i18n”变量，并新建Vue实例传入该“i18n”变量。

查看更多 →

发行说明 组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。

查看更多 →

<script setup> import * as vue from 'vue' import { defineProps, defineEmits } from 'vue' import { I18nInjectionKey } from 'vue-i18n' const props =

查看更多 →

使用Vue应用部署模板创建并部署应用 在主机上部署Vue框架的web服务，并启动该服务。 请确认目标主机已安装Nginx，若已安装请移除模板中“安装Nginx”步骤。 该模板涉及的部署步骤如下所示： 安装Nginx 下载软件包 解压软件包 启动Nginx 重载Nginx配置文件 服务启动测试

查看更多 →

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

查看更多 →

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

查看更多 →

图1 开发流程 创建一个新的工程目录。 使用Vue CLI脚手架创建Demo前端工程，能够自动创建一个简单的样例工程，在此基础上开发能够减少很多繁琐的工作。 编写构建Vue前端组件。 我们可以把功能或者需求类似的有机体封装成一个业务组件，并对外暴露接口来实现灵活的可定制性，这样就

查看更多 →

如何实现页面组件间的交互 组件之间的交互主要依托数据的变化和传输实现，将组件的属性与对应的数据进行绑定。当其他组件的事件、服务编排、事件等使属性绑定值发生变化时，绑定的属性也随即发生变化，实现了组件之间的交互。 数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。

查看更多 →