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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

在经典设计器导航栏中，单击，选择“高级页面 > 组件”，单击“提交新组件”按钮。 在提交新组件页面，设置组件基本信息，并上传压缩文件，单击“提交”。 图4 提交新组件 图5 上传自定义组件示例 表3 上传组件参数说明 参数 说明 名字 新提交组件的名称，系统会根据组件包名称自动填充。 示例：TabsWidget

查看更多 →

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

查看更多 →

-button> </div> 在高级页面组件包的widget_demo_mintui.js/render方法中，新增Vue实例。 更多关于Vue的使用，可参考Vue官网。 Vue.use(MINT); var vm = new Vue({ el: $("#widget_demo_mintui"

查看更多 →

线下开发自定义登录组件 在左侧资产下的组件模板中，单击widgetVueTemplate，再单击“下载”。 图1 下载组件模板 在弹出的窗口中，输入组件名称，并单击“保存”，将组件模板保存到本地，并解压。 图2 输入组件名称 查看解压后的组件目录。 目录结构如图3所示，其中userLogin

查看更多 →

组件”，单击“提交新组件”。 在提交新组件页面，设置组件基本信息，并上传压缩文件，单击“提交”。 图6 上传自定义组件示例 表3 上传组件参数说明 参数 说明 名字 新提交组件的名称，系统会根据组件包名称自动填充。 示例：TabsWidget 上传图标 组件的显示图标。 上传源文件 组件源文件包，单击“请选择源文件(

查看更多 →

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

查看更多 →

助”回到JS代码编辑页面，粘贴到代码编辑区进行使用。 给组件绑定JS方法 在页面JS中添加脚本并保存。 function exampleFunction() { // JS逻辑 } 选中画布中已有的组件元素。 在右侧“高级”设置面板中，鼠标移动至添加按钮上，弹出可添加事件

查看更多 →

生命周期介绍 setup：在组件创建时执行。 onBeforeMount：在组件被挂载之前执行。 onMounted：在组件挂载完成后执行。 onBeforeUpdate：在组件更新之前执行。 onUpdated：在组件更新完成后执行。 onBeforeUnmount：在组件被卸载之前执行。

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

在开发高级页面过程中，系统为页面组件和桥接器提供了一些预置API。 组件 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见表1。 表1 组件名.js中预置API说明

查看更多 →

如果安装成功，应该可以看到npm的版本号。 安装Vue CLI Vue CLI是Vue.js的脚手架工具，可以帮助我们快速创建Vue.js应用。要使用它，我们需要先安装它。 在命令行中输入以下命令来安装Vue CLI： npm install -g @vue/cli 这个命令会全局安装Vue CLI，所以安装

查看更多 →