检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
使用JS面板 在常规代码开发中，您需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。 很多时候您需要自定义一些方法去复用一些逻辑，也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。
组件的配置、依赖关系、版本信息等。 index.js：作为应用程序的入口文件，即程序启动时首先执行的脚本。 *.vue：用于定义Vue组件，包括模板（HTML）、脚本（JavaScript）和样式（CSS）。 组件协议结构规范 组件协议结构规范用于描述组件的关键信息和配置项，对应组件的components字段。
单击“导入物料包”，进入物料包配置页面。 可单击“下载自定义组件开发模板”，获取模板，并完成自定义组件开发，具体操作可参考自定义组件开发指南。 单击“点击上传”，上传本地已打包好的物料包。 上传的物料包名称不能与已有的物料包名称重复。 配置物料包基本信息。 表1 基本信息参数说明 参数 说明 物料包名称 自动识别物料包带入信息，无须手动填写。
已添加cdn链接。 预置cdn链接说明 为了使用的方便，目前在Vue技术栈中，已经预置了一部分npm包的cdn链接，因此使用以下npm包时，无需添加cdn链接。 @vueuse/core @vueuse/shared axios pinia vue vue-i18n vue-router
单击，进入添加工具类页面。 工具类型选择“npm”。 参考表1配置工具类的参数。 表1 参数说明 参数 示例 名称 Loading 包名 @opentiny/vue 导出名称 Loading 是否解构 开启 入口路径 本示例不填 版本号 0.1.20 CDN 本示例不填 单击“保存”。 绑定事件 在中心画布中选中按钮组件。
物料中心”。 鼠标悬浮在待更新的物料包上，将显示操作图标。 图1 显示操作图标 单击更新按钮，进入更新物料包页面。 单击“点击上传”，重新上传本地已打包好的物料包。 重新上传物料包前需删除原文件，否则上传失败。 更新的物料包名称需与原文件物料包名称一致。 更新的版本号自动递增，例如更新前版本号为0
工具类型选择“function”。 输入工具类的名称，并编写函数代码。 function isNil(value) { return value == null } 图1 添加function工具类 单击“保存”，完成function工具类添加。 在JS面板的函数中使用function utils
查看自定义组件物料包 自定义组件物料包上传成功后，支持查看物料包信息。 物料中心为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro Pro实例版本。 查看自定义组件物料包 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台
后将在JS面板中创建一个该名称的新方法。 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后如: onClickNew(eventArgs, extParam1, extParam2, ...)。 图1 设置绑定事件 单击“确定”，弹出JS面板。 在JS面板中进行绑定方法的具体逻辑实现。
注意：使用JS表达式定义state变量的时候无法调用state其他变量定义，另由于JS函数定义在变量之后，也无法调用JS面板定义的函数。 图1 添加变量 （可选）设置变量高级配置。 getter：用于获取（读取）类的私有属性的值。Getter方法通常没有参数，并且返回属性的值。 示例：
下载自定义组件物料包 物料中心提供了一个高效的物料管理解决方案，支持将之前上传的物料包下载回本地环境。这一功能极大地方便了物料的传输和再利用。 物料中心为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro Pro实例版本。 下载自定义组件物料包 参考登录Astr
Todo.vue 设计器的页面概念就相当于上述工程中的一个页面或者文件夹，每个页面有对应的路由，您可以根据路由访问对应的页面。 新增文件夹 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 单击应用模块内的“开发应用”，进入设计器。
如何快速上手AstroPro？ 如何进行应用建模？ 智能客服 您好！我是有问必答知识渊博的的智能问答机器人，有问题欢迎随时求助哦！ 社区求助 华为云社区是华为云用户的聚集地。这里有来自各服务的技术牛人，为您解决技术难题。
图图1所示。 图1 应用页面开发 前提条件 已将页面设计所需要的图片上传到已创建的OBS桶中备用，并获取存储路径。上传图片，请参考上传对象。 步骤一：新建一个应用 应用是业务的入口，可以由一个或多个页面组建成一个完整的业务系统。 进入AstroPro服务控制台。 在左侧导航栏中，选择“前端开发平台
页面。 单击“新增”，按需添加所需的API。 实例级别：定义API实例的级别，如类型、实例。 动作名称：设置API的动作名称。 请求方法：HTTP请求方法（也称为操作或动作），用于告诉服务您正在请求什么类型的操作。 get：请求服务器返回指定资源。 put：请求服务器更新指定资源。
AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括： ：撤销上一步的操作。 ：恢复上次撤销的内容。 ：保存当前页面数据。 ：发布页面模板。 ：清空当前画布内容。 ：刷新当前页面数据，如果页面未保存，页面配置将恢复到上一次保存的状态。 ：单击后可展开左侧插件栏的设置插件，设置当前页面属性。
HTTP-FLV等协议构建的云应用提供性能测试的服务，支持快速模拟大规模并发用户的业务高峰场景，可以很好的支持报文内容和时序自定义、多事务组合的复杂场景测试，测试完成后会为您提供专业的测试报告呈现您的服务质量。更多关于CodeArts PerfTest的介绍，请参见性能测试CodeArts
前端开发视频指导 创建前端应用 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
应用场景 针对企业中使用Dubbo等其他API框架的存量服务，AstroPro支持将代码统一转换为Spring MVC + OpenAPI的主流框架。转换后的框架将统一化，这有助于简化技术栈，降低技术多样性带来的复杂性，同时提高开发和运维团队的效率。 框架转换为Astro Pro专业版/
全面掌握应用、资源及业务的实时运行状况。更多关于AOM的介绍，请参见应用运维管理AOM。 设置完成后，单击“下一步”，进入生成策略页面。 API设置。 图8 API设置 Json序列化 小驼峰：序列化后的json属性名，采用驼峰格式。 下划线：序列化后的json属性名，采用下划线连接单词。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
