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

查看更多 →

] } 上传自定义库。 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在主菜单中，选中“我的资产”。 在左侧导航栏中，选择“我的库”，单击“添加库”。 单击，选择待上传的库，并设置库的基本信息。 图2 上传自定义库 库名字：库的名称。 操作类型：当前操作的类型，如新增、更新等。

查看更多 →

页面资产管理 > 库”。 单击“提交新库”，进入提交新库页面。 设置库的基本信息，上传1中的zip包后，单击“提交”。 图3 上传库 表1 新建MintUI库参数说明 参数 说明 示例 名字 新建库的名称。 取值范围：1~80个字符。 MintUI 上传源文件 选择自定义库的压缩包。 选择1中的库

查看更多 →

] } 上传自定义库。 参考如何登录AstroCanvas中操作，登录AstroCanvas界面。 在主菜单中，选中“我的资产”。 在左侧导航栏中，选择“我的库”，单击“添加库”。 单击，选择待上传的库，并设置库的基本信息。 图2 上传自定义库 库名字：库的名称。 操作类型：当前操作的类型，如新增、更新等。

查看更多 →

上传图标 库的显示图标。 上传源文件 库文件包。 库ID 上传库的ID，由字母及数字组成，且必须以字母开头。 分类 库所属的分类。 库类型 上传的库，所属的类型。 发行说明 上传库的发布描述信息。 上传成功后，在库的“租户”中，可查看到上传的库。 图3 上传完成 “全局”页签中的库，是

查看更多 →

详情页面，单击“删除”，输入待删除库的名称，可删除该库。若需解除禁用，可单击“启用”，重新启用该库。 自定义并上传新库 以某组件中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库并如何在组件中使用库。 将自定义库的相关文件打成Zip包。 例如，在

查看更多 →

json文件中定义所依赖的Element库即可。 在新版环境配置中，查看库ID和版本号。 以查询Element库为例，在开发环境新版环境配置的“维护 > 全局元素 > 页面资产管理 > 库”，搜索库，查看库ID和版本号信息。 图4 查询库信息 图5 查看库版本和ID 本例中查询的Element库ID为：gl

查看更多 →

禁用资产”中，可查看已禁用的库。库禁用后，在库详情页面，单击“删除”，输入待删除库的名称，单击“确定”，即可删除该库。若需解除禁用，可单击“启用”，在弹出的对话框中单击“确定”，即可重新启用该库。 自定义并上传新库 以某组件中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库并如何在组件中使用库。

查看更多 →

json文件中定义所依赖的Element库即可。 在经典版设计器中，单击，选择“应用管理 > 页面资产管理 > 库”，搜索库，查看库ID和版本号信息（以查询Element库为例）。 图3 查询库信息 本例中查询的Element库ID为：global_Element，库最新版本号为：101.0.4。

查看更多 →

json文件中定义所依赖的Element库即可。 查询AstroCanvas预置库信息，本例以查询库“Element”为例。 在AstroCanvas界面“我的资产 > 我的库”中，搜索所需库“Element”，单击，查看库ID和版本号信息。 本例中查询的Element库ID为“global_Element”，库最新版本号为“101

查看更多 →

json文件中定义所依赖的Element库即可。 查询AstroCanvas预置库信息，本例以查询库“Element”为例。 在AstroCanvas界面“我的资产 > 我的库”中，搜索所需库“Element”，单击，查看库ID和版本号信息。 本例中查询的Element库ID为“global_Element”，库最新版本号为“101

查看更多 →

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

查看更多 →

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

查看更多 →

使用JS类库 内置类库列表 断言 chai （v4.2.0）：用于断言BDD/TDD断言。 加密解密库 jsrsasign（10.3.0）：用于RSA加密/解密。 Encode、Decode 库 crypto-js（v3.1.9-1）：编码/解码库，基本包含常用的编码、解码方式，

查看更多 →

Element库即可。 在左侧导航栏中，单击，选择“高级页面 > 库”。 搜索库，查看库ID和版本号信息（以查询Element库为例）。 本例中查询的Element库ID为：global_Element，库最新版本号为：101.0.4。 继续查找VueI18n库的库ID和最新版本号。

查看更多 →

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

查看更多 →

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

查看更多 →

使用JS类库 内置类库列表 断言 chai （v4.2.0）：用于断言BDD/TDD断言。 加密解密库 jsrsasign（10.3.0）：用于RSA加密/解密。 Encode、Decode 库 crypto-js（v3.1.9-1）：编码/解码库，基本包含常用的编码、解码方式，

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →