检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
在左侧插件栏中，单击，展开资源管理页面。 单击，进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称，并编写函数代码。 图1 添加function工具类 单击“保存”，完成function工具类添加。 添加npm工具类 对于一些简单的公共函数来说，直接添加function工具类会很方便，但是对于
使用工具类方法 添加工具类 npm utils使用示例 function utils使用示例 父主题： 前端应用管理
单击，进入添加工具类页面。 工具类型选择“function”。 输入工具类的名称，并编写函数代码。 function isNil(value) { return value == null } 图1 添加function工具类 单击“保存”，完成function工具类添加。 在JS面板的函数中使用function
在物料资产包中选择按钮组件，并拖拽至中心画布中。 添加npm utils 在左侧插件栏中，单击，展开资源管理页面。 单击，进入添加工具类页面。 工具类型选择“npm”。 参考表1配置工具类的参数。 表1 参数说明 参数 示例 名称 Loading 包名 @opentiny/vue 导出名称 Loading
直接运行于Web容器中。 性能测试。 性能测试配置为Astro Pro专业版/企业版功能，如果您需要使用此功能，请升级Astro Pro实例版本。 图6 性能测试 CodeArts性能测试：是否使用CodeArts PerfTest进行性能测试。性能测试CodeArts Perf
初识应用设计器 AstroPro设计器可以分为顶部工具栏、左侧插件栏、中间画布区和右侧属性设置面板四个主要界面模块。 图1 AstroPRO设计器 顶部工具栏 设计器顶部的工具栏从左到右包括： ：撤销上一步的操作。 ：恢复上次撤销的内容。 ：保存当前页面数据。 ：发布页面模板。 ：清空当前画布内容。
框架配置 设置服务的架构、数据库、缓存和安全认证等信息，请根据实际业务直接在界面进行勾选。 生成策略 设置服务的API、代码风格、部署和性能测试等信息，请根据实际业务直接在界面进行勾选。 业务设计 基本配置、框架配置和生成策略需要用户根据自身业务的实际情况进行配置，配置不同生成的
这样，其他服务可以通过这些客户端库以统一和简化的方式调用已有服务的接口，无需关心服务的具体实现细节。生成的客户端库可以作为服务间通信的标准工具，减少了重复的代码编写，提高了开发效率和代码的可重用性。 配置连接器为Astro Pro企业版功能，如果您需要使用此功能，请升级Astro
初识应用设计器 设计前端应用流程 前端开发视频指导 创建前端应用 页面管理 使用组件 属性设置 样式设置 高级设置 查看大纲树 数据源管理 使用工具类方法 国际化资源管理 使用JS面板 变量管理 生成业务代码 发布页面模板 使用模板创建页面 页面模板管理 物料中心
troPro界面。 在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 您可以选择全量或指定部分文件内容。 图1 选择生成文件 单击“确定”，代码将下载至本地路径。
在左侧导航栏中，选择“前端开发平台 > 前端应用”。 选择待操作应用，单击模块内的“开发应用”，进入设计器。 选择已设计完成的页面，单击顶部工具栏。 在弹框中输入页面模板标题及模板描述。 图1 设置模板信息 单击“确定”，完成发布页面模板。发布完成后，可在模板管理中查看。 图2 查看页面模板
前端应用”。 单击应用模块内的“开发应用”，进入设计器。 在设计器中可根据您的需求设计前端页面，可参考设计前端应用流程进行开发。 单击顶部工具栏的“下载源码”按钮，可根据配置的页面设计，生成应用的基本代码。 代码生成后，会下载至本地，供您使用。 删除前端应用 参考登录AstroP
用户预先定义好的数据传输对象（可选项） |-- utils # 工具类（必填项） |-- resources # 资源目录结构 |--
# 配置类（必填项） |-- utils # 工具类（必填项） |-- exception # 异常类（必填项） |--
选择“属性”，文本输入“设置/忘记密码”。 图9 整体页面效果 单击顶部工具栏的，保存页面设计。 步骤四：生成代码 根据配置的页面设计，生成应用的基本代码。代码生成后，会下载至本地，供您使用。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 图10 选择生成文件
设置组件样式 图8 设置组件高级属性 步骤五：生成代码 根据配置的页面设计，生成应用的基本代码。代码生成后，会下载至本地，供您使用。 单击顶部工具栏的“下载源码”按钮。 选择下载路径。 选择生成到本地的文件。 图9 选择生成文件 单击“确定”，代码将下载至本地路径。 父主题： 前端应用管理
ents两个子文件夹。 assets：作为存放项目特定资源的地方。 components：用来存放应用程序的组件代码，如自定义的类、服务、工具类等。 模板文件介绍 所有的自定义组件都在src/components文件夹里面内开发，模板内提供了两个预置模板componentA和co
样式管理 通过样式面板配置样式 直接编写样式代码 使用状态选择器 行内绑定状态变量 高级配置管理 条件渲染 循环渲染 绑定事件 使用数据源 添加工具类 国际化资源管理 使用JS面板 添加变量 物料中心 自定义组件开发指南 上传自定义组件物料包 更新自定义组件物料包 下载自定义组件物料包
67564435')，其中lowcode.67564435为词条的key值，可参考复制词条键值获取。 图6 绑定变量 单击“确定”，变量绑定完成。 单击顶部工具栏的中英文切换按钮，可进行中英文切换。 图7 中文显示 图8 切换英语 父主题： 前端应用管理
单击，进入页面设置页面。 单击“添加页面生命周期”，选择setup。 在setup函数使用getA()，单击“保存”。 出码结果 在顶部工具栏单击“下载源码”，查看出码结果。 <template> <div> <span>{{ state.testValue }}
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
