前端开发难免使用第三方库,鸿蒙亦是如此,在使用 DevEco Studio 开发工具时,如何引入第三方库呢?操作步骤如下,假设你使用的是MacOS,假设你已经创建了了一个项目:
一、配置 HTTP Proxy
在打开了工程的情况下,点击左上角 DevEco Studio -> Preferences -> Appearance & Behavior -> System Settings -> HTTP Proxy
进入HTTP Proxy
设置界面,如下图:
在HTTP Proxy
配置中,我们不需要设置代理,所以直接勾选 No proxy
。
二、配置NPM代理
在打开了工程的情况下,可以单击 DevEco Studio -> Preferences -> Build, Execution, Deployment -> Node.js and npm -> Optimize config
具体配置如下:
1.npm registry:配置npm仓的地址信息。
https://repo.huaweicloud.com/repository/npm/
2.ohos registry:HarmonyOS npm三方包共享仓。
https://repo.harmonyos.com/npm/
这里我们也不需要设置 HTTP proxy
信息。
填写并勾选以上信息后,点击OK。在此界面配置的代理信息将写入 .npmrc
文件中,文件路径 /Users/sunshiyu/.npmrc
。因此也可直接修改.npmrc
文件进行配置。
为Node
配置环境变量:
export NODE_HOME= /usr/local/bin #本处路径请替换为Node的安装路径
export PATH=${NODE_HOME}/bin:${PATH}
三、配置OHPM代理
在打开了工程的情况下,可以单击 DevEco Studio -> Preferences -> Build, Execution, Deployment -> Ohpm -> Optimize Config
具体配置如下:
1.ohpm registry:配置ohpm仓的地址信息。
https://repo.harmonyos.com/ohpm/
这里我们也不需要配置 HTTP proxy
信息。填写并勾选以上信息后,点击OK。
在此界面配置的代理信息将写入.ohpmrc
文件中,路径 /Users/sunshiyu/.ohpm/.ohpmrc
。因此也可直接修改 .ohpmrc
文件进行配置。
为ohpm
配置环境变量中。
export OHPM_HOME=/Users/sunshiyu/Library/Huawei/ohpm #本处路径请替换为ohpm的安装路径
export PATH=${OHPM_HOME}/bin:${PATH}
四、安装三方库
以上三步理论上在安装DevEco的时候就已经配置好的,如果有同学需要配置HTTP proxy
,请参考官方文档:配置开发环境 。我们来安装一个三方库试试,打开项目中的终端:
安装 lottie
:
ohpm info @ohos/lottie
再安装一个List
组件的下拉加载库: PullToRefresh:
ohpm install @ohos/pulltorefresh
其实安装的速度还是很快的。
查看项目中安装的三方库:
ohpm list
项目中三方库位置如下: