添加工具类
在常规代码开发中，我们通常会将一些高频率用到的一些代码片段抽离出来业务代码，使其成为一个公共函数，减少重复的代码，从而达到代码复用的目的。 同样，在低代码开发中，我们不可避免的需要编写一些高代码进行组合开发，这里同样存在存储一些公共函数以供各处调用需求。工具类就是在这样的背景之下诞生，我们可以将一些可复用的公共函数编写到工具类中，也可以将一些npm包引用到工具类中，供后续调用。
工具类是应用级别的，即引入之后，即可在该应用下任意页面中进行调用
添加function工具类
- 参考登录AstroPro界面中操作，登录AstroPro界面。
- 在左侧导航栏中，选择“前端应用”。
- 单击应用模块内的“应用开发”，进入设计器。
- 在左侧插件栏中，单击
，展开资源管理页面。 - 单击
，进入添加工具类页面。 - 工具类型选择“function”。
- 输入工具类的名称，并编写函数代码。
图1 添加function工具类
- 单击“保存”，完成function工具类添加。
添加npm工具类
对于一些简单的公共函数来说，直接添加function工具类会很方便，但是对于一些比较复杂的公共函数或者第三方的一些公共函数来说，直接编写函数并不是一个理想的方式，所以，设计器还提供了npm工具类，以供引入npm包。
- 参考登录AstroPro界面中操作，登录AstroPro界面。
- 在左侧导航栏中，选择“前端应用”。
- 单击应用模块内的“应用开发”，进入设计器。
- 在左侧插件栏中，单击
，展开资源管理页面。 - 单击
，进入添加工具类页面。 - 工具类型选择“npm”。
- 参考表1配置工具类的参数。
表1 参数说明 参数
说明
名称
工具类名称。
包名
npm包名。
导出名称
import时的命名，如果是非解构，则可以自由命名，如果是解构，则npm包的导出必须要有该名称。
是否解构
解构则使用如import { export1 } from 'module'的方式导入。
入口路径
有些npm包的方法并不在默认导出中，如import { foo , bar } from "module-name/path/to/specific/un-exported/file"；则需要填写入口路径。
版本号
npm包的版本号，需要符合npm包版本规范，详见semver，如不填则默认为latest。
CDN
如果页面使用了npm工具类，则需要在手动录入npm cdn链接，否则可能会造成页面预览失败。
图2 添加function工具类
- 单击“保存”，完成function工具类添加。
cdn链接相关说明
cdn链接就是npm包在浏览器直接可用的链接，如：https://unpkg.inhuawei.com/，提供了大部分的cdn链接，可以从上面获取。 在页面预览中，并不会对所有代码和依赖进行转译，npm依赖需要以cdn方式进行引入，所以，如果添加了npm工具类，在预览失败时，请确保已添加cdn链接。
预置cdn链接说明
为了使用的方便，目前在Vue技术栈中，已经预置了一部分npm包的cdn链接，因此使用以下npm包时，无需添加cdn链接。
- @vueuse/core
- @vueuse/shared
- axios
- pinia
- vue
- vue-i18n
- vue-router
- vue/server/renderer
- @opentiny/vue
