ui-extensions-examples 的安装和配置教程

2025-05-23 08:20:21作者：冯爽妲Honey

1. 项目的基础介绍和主要的编程语言

ui-extensions-examples 是一个开源项目，旨在提供使用 HubSpot CRM 开发工具构建的 UI 扩展示例。这些示例可以帮助开发者学习如何利用 HubSpot 的平台来创建自定义的 CRM 卡片。该项目主要使用 TypeScript (65.6%) 和 JavaScript (34.4%) 两种编程语言。

2. 项目使用的关键技术和框架

该项目使用了以下关键技术和框架：

React: 用于构建用户界面的 JavaScript 库。
HubSpot CRM 开发工具: 一套允许开发者在 HubSpot 平台上构建和部署自定义功能的工具。
ESLint: 一个用于识别和报告 JavaScript 代码中模式的工具，以保持代码质量。
Prettier: 一个代码格式化工具，帮助统一代码风格。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装之前，请确保您已经满足了以下条件：

拥有一个 HubSpot 账户，并且该账户已加入 CRM 开发工具的公开测试。
安装了最新的 Node.js 环境。
安装了 HubSpot CLI。

安装步骤

更新 HubSpot CLI 并认证账户

打开命令行工具，执行以下命令以更新 HubSpot CLI 到最新版本：
```
npm install -g @hubspot/cli@latest
```
然后，初始化您的账户配置文件：
```
hs init
```
接着，认证您的 HubSpot 账户：
```
hs auth
```
或者，如果您已经有预先认证的账户，可以选择使用：
```
hs accounts use <account_name>
```
创建项目

在您希望克隆示例项目的文件夹中，运行以下命令创建一个新项目：
```
hs project create --templateSource="HubSpot/ui-extensions-examples"
```
根据提示，为项目命名，指定项目目录，并选择您希望在账户中运行的示例。
安装依赖

切换到项目目录：
```
cd <project_dir>
```
然后安装项目依赖：
```
npm install
```
配置和上传项目

按照项目文件夹中 README 文件的说明进行配置。您可能需要设置额外的环境变量和提供测试数据。

配置完成后，运行以下命令上传项目：
```
hs project upload
```
如果您想在本地开发并看到更改后的效果，可以运行：
```
hs project dev
```