3.2.2快速上手

快速上手

本小节将为您介绍在构建VPA卡片（组件）所需要的开发环境。

1、前置提示

推荐，但非必须

推荐使用 volta 管理 node 版本，在开发机器上安装 volta 后，volta 会自动识别 package.json 中的 node 版本，并安装。

在往后的开发中，当使用 node 或者 npm 命令时，volta 会自动切换到项目中指定的 node 版本。

方便开发者在不同项目中使用不同版本的 node。

volta 安装方法参考：https://docs.volta.sh/guide/getting-started

2、开发环境设置

2.1 检出代码

git clone https://git.yonyou.com/YangYongAn/vpa-h5.git

2.2 安装依赖和启动服务

✍ 由于包内某些组件依赖于 YNPM 物料库，因此包管理工具请使用 YNPM 。如果没有安装 YNPM，请先安装 YNPM 。

ynpm install

稍等片刻，安装完成后，启动服务：

ynpm run start

3、设置配置信息

👍🏻 推荐使用【开发助手】自动设置

环境准备：

  1. 开发机器和手机在同一个局域网中
  2. 开发机器上安装了友空间 APP

项目如果正常启动，会在浏览器中打开一个页面，页面中会有一个配置信息的二维码，需要使用友空间 APP， 扫码打开开发助手页面，然后在开发助手页面中，按照页面提示设置配置信息。

✍ 相关原理：扫码会从友空间获取必要的会话信息，主要是 host 和 yhtAccessToken ，然后将这些信息伴随一个配置文件名，发送到开发机器上。 开发机器接收到信息后，会去项目根目录的 .config 目录下写入相关配置，并且会更改 .env.local 的 process.env 中的相关配置信息。

🍉 如果不方便扫码或者没有局域网，可以参考【本地开发配置】手动设置配置信息

4、重启服务

配置信息设置完成后，需要重启服务，才能生效。

ynpm run start

如果一切顺利，项目会正常启动，并且能够在欢迎页面看到相关欢迎语，说明已经成功进入开发环境。

接下来，就可以开始开发了。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24