Skip to main content

安装开发工具

学习目标

在本项目中,您将:

  • 安装推荐的开发人员工具以创建和使用 Lightning Web 组件。
  • 创建 Lightning Web 组件。
  • 使用提供的开发人员工具修复代码中的错误。
  • 配置记录布局以显示您的 Lightning Web 组件。
  • 在 Salesforce 组织中启用本地开发。
备注

备注

用中文(简体)学习?在中文(简体)Trailhead Playground 中开始挑战,用括号中提供的译文完成挑战。仅复制并粘贴英文值,因为挑战验证基于英文数据。如果在中文(简体)组织中没有成功通过挑战,我们建议您 (1) 将区域设置切换为美国,(2) 按此处说明将语言切换为英文,(3) 再次单击“检查挑战”按钮。

查看 Trailhead 本地化语言徽章详细了解如何利用 Trailhead 译文。

您已学习此编程模型,名为 Lightning Web 组件,现在您想要开始构建您自己的 Web 组件。首先,您需要一些工具来编写 Lightning Web 组件。 

虽然您可以使用任何文本编辑器创建 Lightning Web 组件,但您将无法获得一组专用工具提供的支持。如果您是一位经验丰富的 Salesforce 开发人员,希望将 Lightning Web 组件整合到您的应用程序中,那么如果您将一些新工具整合到您的工具链中,您将更加成功。如果您不熟悉 Salesforce 开发并希望开始构建 Lightning Web 组件,您会想要熟悉用于处理 Salesforce 项目的正确工具链。

由于 Lightning Web 组件是基于现代 Web 标准,因此相关工具建立在当前 Web 开发人员中流行的工具之上是合乎逻辑的。

创建新的 Trailhead Playground

对于该项目,您需要创建新的 Trailhead Playground。滚动到此页面的底部,单击 Playground 名称,然后单击 Create Playground(创建 Playground)。创建新的 Trailhead Playground 通常需要 3 到 4 分钟。

注意:是的,确实是指一个全新的 Trailhead Playground!如果您使用现有的组织或 Playground,则在完成此项目中的步骤时可能会遇到问题。

设置 Salesforce CLI

与许多其他编程语言和模型一样,Salesforce 包含一个命令行界面 (CLI)。如果您曾经使用过 npm、Yarn、Gradle 或 Maven,那么 Salesforce CLI 对您来说会很熟悉——它就是专为 Salesforce 开发任务量身定制的。

Salesforce CLI 允许您以多种方式与 Salesforce 环境进行交互,例如检索或推送代码或与数据交互。CLI 由几个插件组成。这些插件提供重要的特定功能。例如 plugin-org 插件提供了管理 Salesforce 组织的功能,例如创建临时组织。

备注

有趣的事实:Salesforce CLI 100% 开源。您可以查看所有的源代码,甚至可以贡献新的功能。查看 Salesforce CLI 状态页了解包含的插件及其存储库。 

安装

如果您已经安装了 Salesforce CLI,您可以跳过这部分。请遵循以下步骤或参阅 Salesforce CLI 设置指南查看安装说明。

  1. 通过 https://developer.salesforce.com/tools/salesforcecli 安装 CLI。
  2. 通过在命令行中运行以下命令确认已正确安装最新版本的 CLI:sf update
  3. 您应该看到类似以下的输出:@salesforce/cli:Updating CLI…(@salesforce/cli:正在更新 CLI..)

您的 Salesforce CLI 已经准备好了。很简单,是不是?

安装本地开发

本地开发是一款 Salesforce CLI 工具,它能让您在浏览器中实时预览 Lightning Web 组件。在您本地编辑组件时,预览可以自动更新,因此您无需部署代码或手动刷新浏览器页面。

此功能通常适用于 Lightning Experience 应用程序(包括桌面版和 Salesforce 移动应用程序)。您还可以为临时组织启用本地开发。目前,这是针对 Experience Cloud Lightning Web Runtime 网站的测试版。

安装

您必须先安装 Salesforce CLI,然后才能安装本地开发。然后,在命令行上运行以下命令,为临时组织或 Sandbox 组织安装本地开发:

sf plugins install @salesforce/plugin-lightning-dev@prerelease
备注

如果您的生产组织即将发布,则应通过从命令行运行以下命令来安装本地开发的最新实例:sf plugins install @salesforce/plugin-lightning-dev@latest

但对于此 Trailhead 项目,您应该安装预发布版本。

现在,作为新的 Lightning Web 组件开发人员,我们继续工具箱中的下一个工具,IDE。

下载并配置 Visual Studio Code

Visual Studio Code 是 Salesforce 开发人员的首选代码编辑器。它是免费的、开源的,可用于 Windows、Linux 和 macOS。Visual Studio Code 在 Web 开发人员中是一个完善的 IDE。现在,它也是构建 Lightning Web 组件的有效 IDE,Salesforce 为 Visual Studio Code 提供免费扩展,可进一步简化您的开发体验。我们还提供 Salesforce Extension Pack。Extension Pack 为在 Lightning Platform 上进行开发提供了出色的工具,并包括用于使用 Apex、Visualforce 甚至 Replay Debugger 的工具。 

按照这些说明即可安装 Visual Studio Code 和 Salesforce 扩展包。 

  1. 下载并安装适合您的操作系统的最新版 Visual Studio Code。如果您已经安装了 Visual Studio Code,无需重新安装。
  2. 启动 Visual Studio Code。
  3. 点击侧栏中的扩展程序 (扩展)。
  4. 搜索 Salesforce Extension Pack,然后单击 Install(安装)。如果已安装,则只需单击 Reload(重新加载)按钮。
    Visual Studio Code 的 Salesforce Extension Pack 搜索。
  5. macOS 系统中按 Command + Shift + P,Windows 或 Linux 按 Ctrl + Shift + P 显示命令面板。在命令面板中,键入 sfdx 显示可用命令的初始列表。

完成!您已安装开发第一个 Lightning Web 组件所需的所有工具。

激活开发人员中心

对于此项目,您将 Trailhead Playground 用作开发人员中心,并在临时组织中创建 Lightning Web 组件。但首先让我们解释一下什么是开发人员中心和临时组织。

临时组织是一个专用的、可配置的短期 Salesforce 环境,您可以在启动新项目、新功能分支或功能测试时快速启动该环境。

开发人员中心 (Dev Hub) 是您和您的团队用来创建和管理临时组织的主要 Salesforce 组织。

注意

在组织中启用 Dev Hub 后,您将无法禁用。

  1. 启动您的 Trailhead Playground
  2. 单击 Setup(设置) (设置) 选择 Setup(设置)
  3. 在 Setup(设置)中的 Quick Find(快速查找)框中输入 Dev Hub,然后选择 Dev Hub
  4. 单击滑块以启用 Dev Hub。

就是这么简单。您已通过启用 Lightning Web 组件设置了 Dev Hub,您已下载、安装和配置您需要的工具。在下一步中,您使用这些工具创建您的第一个 Lightning Web 组件。

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈