使用 Lightning Web 组件（LWC）框架在 Salesforce 平台上构建自定义用户界面、Web 和移动应用程序以及数字体验。Lightning Web 组件是使用 HTML 和 JavaScript 构建的自定义 HTML 元素。

Salesforce 提供基于 Lightning Design System 构建的基本 Lightning Web 组件，用作自定义体验的构建块。使用基本的 Lightning Web 组件为您的用户提供一致的外观，并简化您的开发体验。Salesforce Lightning Experience 基于 Lightning Design System 和基础 Lightning 组件构建。

提示

首先，请选择适合您的路径。

开始编码：创建您的第一个组件
设置开发环境
探索 Trailhead 和示例代码
了解如何使用 Salesforce 数据
了解如何自定义 Salesforce 功能

编写标准的 JavaScript 和 HTML

Lightning Web 组件使用核心 Web 组件标准，并且仅提供在 Salesforce 支持的浏览器中正常运行所需的内容。由于 Lightning Web 组件基于在浏览器中本地运行的代码构建，因此它是轻量级的，可提供卓越的性能。您编写的大多数代码都是标准的 JavaScript 和 HTML。

Salesforce 致力于开发开放的 Web 标准，并且是万维网联盟（W3C）的成员。Salesforce 开发人员是 Ecma 国际技术委员会 39 （TC39）的贡献成员，该委员会是发展 JavaScript 的委员会。

Lightning Web Components 也是开源的。

向后兼容性

您可以使用两种编程模型构建 Lightning 组件：Lightning Web 组件和原始模型 Aura 组件。Lightning Web 组件和 Aura 组件可以在一个页面上共存和互操作。对于管理员和最终用户来说，它们都显示为 Lightning 组件。

基础 Lightning 组件可作为 Lightning Web 组件和 Aura 组件使用。组件参考包括两者的文档、规格和示例。请参阅基本组件：Aura 与 Lightning Web 组件，了解它们之间的差异。

当您在 LWC 和 Aura 之间进行选择时，请选择 LWC。了解如何选择 Lightning Web 组件或 Aura。

Lightning 组件库

Lightning 组件库包括 Lightning Web Security 和 Lightning Locker 的组件参考信息和工具。

您可以在两个位置找到组件库：公共站点和链接到您的 Salesforce 组织的经过身份验证的站点。在经过身份验证的站点中，“组件库”的“组件引用”部分具有一些附加功能。公共组件库

在不登录 Salesforce 的情况下查看此站点。“组件参考”包括基本组件的文档和参考信息。

https://developer.salesforce.com/docs/component-library组织的组件库

通过登录您的 Salesforce 组织并导航到来查看此站点。或者，单击公共站点右上角的“链接到您的组织”。https://<myDomainName>.lightning.force.com/docs/component-library

经过身份验证的站点具有组件引用的更多功能。

查看您的组织独有的 Lightning 组件。
查看安装在托管软件包中的 Lightning 组件。您可以进行筛选以查看您的组织拥有的组件或安装在软件包中的组件。

注意

《开发人员指南》在组件库中不再可用。访问会将您重定向到。https://developer.salesforce.com/docs/component-library/documentation/en/lwchttps://developer.salesforce.com/docs/platform/lwc/guide

组件参考

在组件参考中，您可以找到有关每个基本 Lightning 组件的详细信息。它记录了 Lightning Web 组件和 Aura 编程模型的全套基本组件。

以下是有关组件参考的一些亮点。过滤器组件

在“概述”页上，筛选以重点关注你感兴趣的组件。例如，若要仅查看与导航相关的组件，请选择“筛选器”|”分类 |导航。查看目标

选择组件时，顶部的“目标”面板会显示可以使用该组件的位置。目标可以包括 Salesforce 应用程序、Lightning Experience、Experience Builder Sites、Salesforce 移动应用程序、独立 Lightning 应用程序等。在组件之间切换

通过单击“以 Aura 组件形式查看”和“以 Lightning Web 组件形式查看”按钮，在组件的版本之间切换。查看示例、文档和规格页面

大多数组件都有“示例”、“文档”和“规范”页面。某些组件（如和）需要 Salesforce 数据。它们不能在组织外部使用，也没有示例页面。lightning-record-formlightning-input-field修改交互式示例

示例页包含交互式代码示例，用于演示组件的外观和行为。您可以查看正在运行的代码。对于 Lightning Web 组件，您还可以在 Lightning Mini Playground 中编辑示例代码，并立即在交互式示例中查看您的更改。但是，示例中使用的组件不是最新版本。请参阅组件参考示例。

组件引用的已知问题

以下是组件引用的一些已知问题。示例使用旧版本的基本 Lightning 组件和 Salesforce Lightning Design System （SLDS）

由于技术限制，示例的运行时环境不使用最新版本的组件和 SLDS。有关详细信息，请参阅组件参考示例。公共组件引用与经过身份验证的组件引用中的非闪电命名空间差异

在公共站点中，非 lightning 命名空间的组件参考可能包含过时的内容。对于非闪电组件（如或），请验证中的规格和文档。wave:waveDashboardforce:createRecordhttps://<myDomainName>.lightning.force.com/docs/component-library不支持在您的组织中开发的 Lightning Web 组件的文档

“组件参考”不显示自定义 Lightning Web 组件的文档规格面板缺少内容

模块不会在“规范”页上显示说明或方法。说明和方法位于文档页面上。模块包括：

lightning/empApi
lightning/flowSupport
lightning/messageService
lightning/navigation

某些具有默认值的属性不会在“默认”列中显示值。有关默认值，请参阅“说明”列。

自定义事件不会显示在“规范”页面中。有关此信息，请参阅组件的文档页面。不支持版本控制和本地化

组件参考不像其他 Salesforce 开发人员文档那样提供版本或语言选择器。它仅显示与当前版本相对应的文档，并且内容仅提供英文版本。

组件参考示例

“示例”选项卡显示在页面上的运行时环境中呈现的基本 Lightning 组件示例代码。

要试验 Lightning Web 组件示例，请修改代码并单击运行。Aura 组件示例不可编辑，但可以渲染，您可以与它们交互。

由于我们正在努力解决的技术限制，运行时环境不使用最新版本的基本 Lightning 组件。因此，组件更改（如最近版本中记录的新属性）不会反映在示例中，如果将它们添加到示例中，则不起作用。

运行时环境也跟不上 SLDS 版本。我们在 See Improved Color Contrast in UI Elements Winter ’24 发行说明中宣布的 Web 内容辅助功能指南（WCAG）颜色更新未反映在示例中。但是，您在自定义组件中使用并在 Salesforce 组织中运行的基本 Lightning 组件确实包含基本组件和 SLDS 的最新功能。

Lightning Web Security 控制台和 LWS 失真查看器工具

Lightning Web Security 控制台和 LWS 失真查看器可帮助您开发与 Lightning Web Security 一起运行的安全 JavaScript 代码。

有关使用这些工具的更多信息，请参阅在 Lightning Web Security 控制台中评估 JavaScript 和在 LWS 失真查看器中查找失真详细信息。

有关 Lightning Web Security 及其与 Lightning Locker 的比较的更多信息，请参阅 Lightning Web Security。

Locker 控制台和 Locker API 查看器工具

Locker 控制台和 Locker API 查看器可帮助您开发与 Lightning Locker 兼容并高效运行的安全 JavaScript 代码。

有关使用这些工具的更多信息，请参阅《Lightning Aura 组件开发人员指南》中的 Lightning Locker 工具。

有关 Lightning Locker 和 Lightning Web 组件的更多信息，请参阅 Lightning Locker 的安全性。

Lightning Web 组件发行说明

使用 Salesforce 发行说明了解 Lightning Web 组件的最新更新和更改。

有关影响 Lightning Web 组件的更新和更改，请参阅 Salesforce 发行说明中的 Lightning 组件。

有关新的和更改的组件和模块，请参阅 Salesforce 发行说明中的 Lightning 组件：新增和更改的项目。

开始编码

编写第一个 Lightning Web 组件代码的最快方法是使用实时代码环境。

要开始使用简单的组件，我们建议使用 LWC.studio 或 StackBlitz。或者，使用 Salesforce DX 工具将 LWC 代码推送到您的组织。

注意

StackBlitz 和 LWC.studio 是第三方产品，受其自身条款和条件的约束。Salesforce 对这些网站上提供的内容、服务或付费选项概不负责。您使用这些网站和平台的风险由您自行承担，并受任何适用的附加条款的约束，例如第三方的服务条款或隐私政策。

特定于基本组件的实时示例也可在 studio.webcomponents.dev/workspace/lwc 和组件参考中找到。

创建您的第一个组件

让我们使用 LWC.studio 中的第三方 IDE 创建一个 Hello World Lightning Web 组件。

在浏览器中，转到 app.lwc.studio。使用您的 GitHub 帐户登录。
登录后，单击“+新建”按钮。
通过单击文件夹旁边显示的“新建文件”图标来创建文件，并将其命名为。将此代码复制到代码编辑器中。srchelloWorld.html
创建一个文件并将其命名为。将此代码复制到代码编辑器中。helloWorld.js
若要查看组件，请将其添加到文件中最后一个结束标记之前。app.html</div>骆驼大小写组件名称（）映射到 HTML （）中的烤肉串大小写。默认命名空间是，因此完整组件 HTML 标记是。另请注意，组件必须使用结束标记。若要引用自己的组件，请始终使用默认命名空间 .无论代码在何处运行，都可以使用：在有或没有命名空间的组织中，在托管或非托管包中。helloWorldhello-worldc<c-hello-world>cc
要保存所有更改，请单击代码编辑器右上角的“保存”图标。“故事”面板将刷新以显示“Hello， World！”文本。
让我们更进一步，向组件添加一个公共属性。在中，导入，并使用它来装饰字段。c-hello-worldhelloWorld.jsapifirstName
由于公开了公共属性，因此使用该属性的组件可以设置该属性。在我们的示例中，该组件设置了属性。c-hello-worldc-hello-worldappfirstName在中，向标记添加属性。骆驼大小写 JavaScript 属性映射到 HTML 中的 kebab 大小写。app.htmlfirst-name<c-hello-world>firstNamefirst-name
现在，您的组件是可重用的。例如，您可以添加多个组件，并将每个组件设置为不同的值。c-hello-worldapp.html

若要继续编码，请跳转到模板中的数据绑定。玩得愉快！

Lightning Web 组件：开源

Lightning Web 组件是开源的，使您能够探索源代码，自定义行为以满足您的需求，并在任何平台（而不仅仅是 Salesforce）上构建企业级 Web 组件。

过去，您必须使用不同的框架来构建托管在 Salesforce 外部的应用程序的不同方面。例如，您使用 Aura 在 Salesforce 上构建应用程序面向员工的一面。您使用 React、Angular 或 Vue 构建了应用程序面向客户的端，并将其部署在 Heroku 或其他平台上。现在，您可以使用 Lightning Web 组件来构建应用程序的两端。好处是显着的。您现在可以学习一个框架而不是多个框架。您可以在应用之间共享代码。而且，您正在使用基于 Web 标准并基于最新模式和最佳实践构建的尖端框架。

GitHub 存储库 – github.com/salesforce/lwc
开源开发人员站点 – lwc.dev

《Lightning Web 组件开发人员指南》（您现在正在阅读）介绍了如何开发在 Lightning 平台上运行的 Lightning Web 组件，以及如何使用 Lightning Data Service、Lightning Locker 和 Lightning Out 等平台功能。

与 Lightning Web 组件开源一样，Lightning Out 允许您在 Lightning Platform 上运行 Lightning Web 组件。如果您的组件需要访问 Salesforce 数据，请使用 Lightning Out。如果您的组件不需要 Salesforce 数据或任何其他 Salesforce 功能，请使用 Lightning Web Components 开源进行开发。

LWC 开源和 Salesforce 平台上的 LWC 之间的差异

重要

开源存储库中的代码领先于 Lightning 平台上可用的代码。开源存储库中发布的大多数功能最终都会在 Lightning 平台上发布。

Salesforce 平台上的 Lightning Web 组件是 Lightning Web 组件：开源的托管版本。在 Salesforce 平台上工作时，您可以下载 LWC，按照自己的方式进行配置，在任何托管环境中部署应用程序，并选择何时升级。在 Salesforce 平台上工作时，Salesforce 会为所有客户管理 LWC 的配置、部署和升级。

LWC OSS 和平台上的 LWC 有不同的发布时间表。LWC 工程团队通常每周发布一次 LWC OSS，而 Salesforce 平台每年发布三次。由于这种差异，Salesforce 平台上的 LWC 版本比 LWC 的开源版本晚 3-6 个月。

开源 LWC 引擎与 Salesforce 平台上的 LWC 引擎相同。区别在于引擎在编译器级别和运行时的配置方式。

Salesforce 平台上的编译时差异

在 Salesforce 平台上使用实验性 LWC API 受到限制，并引发 linting 错误。
- 实验性模板 API：lwc：dynamic（已弃用并替换为 <lwc：component lwc：is={componentConstructor}>)
- 实验性 JavaScript API：、、、、和buildCustomElementConstructorcreateElementswapComponentswapTemplateswapStyle
将 LWC 模块推送到 Salesforce 平台时，将应用以下 linting 规则。
- 强制执行 @salesforce/eslint-config-lwc/base 中的所有规则。ESLint 忽略这些规则的内联配置。
- 禁止动态导入（）。import('c/foo')
- 禁止从 LWC 模块访问 Aura（例如，）。$A
@salesforce/*导入根据组织的元数据（例如，Apex 方法、标签和架构）进行验证。

Salesforce 平台上的运行时差异

组件在启用的情况下运行。此模式允许支持 IE11，IE11 不实现影子 DOM。作为副作用，在页面级别注入的所有样式（例如，using from ）都会泄漏到组件中。@lwc/synthetic-shadowloadStylelightning/platformResourceLoader
linkSVG 元素上的属性由 Locker 清理，以防止潜在的恶意脚本注入。xlink:href<use>
LWC 模块在 Lightning Locker 或 Lightning Web Security 中进行评估。除了应用于标准 Web 平台 API 的限制之外，Locker 和 Lightning Web Security 还为 LWC 组件添加了一些限制：
- this.template.host总是返回。null
- 访问从模板检索到的组件时，始终返回。shadowRootnull

API 版本控制

从 24 年冬季开始，LWC 支持自定义组件的版本控制。当组件指定版本时，该组件将取决于 Salesforce 版本的版本。组件的每个 HTML、CSS 和 JS 文件对应一个 API 版本。API 版本告诉 LWC 框架的行为与与该组件的 API 版本相对应的 Salesforce 版本的行为相同。

提示

虽然 Salesforce 平台上的 LWC 使用与 LWC 开源相同的代码库，但 Salesforce 平台上的 LWC 版本比开源版本晚 3-6 个月。LWC 开源遵循语义版本控制（semver）特征。请参阅 LWC 开源：LWC 版本控制。

升级组件的 API 版本

截至 24 年冬季，58.0 及更早版本的所有 API 版本对应于 58.0（23 年夏季）。如果将 API 版本设置为低于 58.0 的值，则 LWC 默认使用版本 58.0。

若要应用与更高 API 版本相关的 bug 修复和新功能，请升级组件的 API 版本。

注意

API 版本中的警告可能会在下一个 API 版本中成为错误。我们建议您测试每个版本，一次升级一个版本。

要升级组件 API 版本，请执行以下操作：

发布组件。修复 SFDX 控制台中的任何警告。
在沙盒中运行组件。修复浏览器 DevTools 控制台中的任何警告。
将组件的 *.js-meta.xml 文件中的 apiVersion 递增到下一个版本。
再次发布组件，并验证是否不再看到任何警告。

例如，如果将 apiVersion 值指定为 58.0，则组件的行为将继续与 API 版本 58.0 （Summer ’23）中的行为相同。

注意

无论如何，自定义组件始终使用最新版本的 Lightning 数据服务和基本 Lightning 组件。apiVersion

组件级中断性变更

组件级重大更改适用于 Lightning Experience 和 Experience Builder 站点的自定义组件。要在组件中实施这些更改，请将 .apiVersion59.0

小写所有 CSS 范围标记
抛出错误而不是 parse5 HTML 错误的警告

组件级功能

在 Winter ’24 中，没有任何与值对应的新 LWC 要素。要查看最新 Salesforce 版本中 LWC 的更改，请参阅发行说明。除非另有说明，否则更改适用于所有值。apiVersionapiVersion

Salesforce 版本和 LWC API 版本

以下是 Salesforce 版本映射到 LWC API 版本的方式。

版本控制注意事项

使用 LWC API 版本控制时，请考虑以下准则。

如果使用的版本早于已知最早的 LWC API 版本，则 LWC 将使用最早的已知版本。例如，如果已知最早的版本是 58.0，而您提供的是 57.0，则 LWC 将使用 58.0。apiVersion
如果最新的 LWC 版本是 60.0，而您提供的是 61.0，则 LWC 将使用 60.0。
LWC API 版本控制不适用于 Aura 组件和 LWR。
LWC API 版本控制仅适用于 Lightning Experience 中包含该文件的自定义组件。*.js-meta.xml
LWR 中的自定义组件在未在 Lightning Experience 或 Experience Cloud 中运行时使用最新的 LWC API 版本。
同一页面上或同一托管包中的组件可以具有不同的 API 版本。

支持的浏览器

Lightning Web 组件支持与 Lightning Experience 相同的浏览器。请参阅 Lightning Experience 支持的浏览器。

Salesforce 于 2023 年 1 月 1 日终止了 Lightning Experience 和 Salesforce Classic 中对 Internet Explorer 11 的支持。在 Winter ’24 之后，您将无法再使用 Internet Explorer 11 和其他旧版浏览器来查看或访问 Lightning Experience。如果您的代码使用了不受支持的浏览器之一，则可以将其删除。我们建议在受支持的浏览器的最新版本中访问 Lightning Experience。

浏览器扩展

虽然有许多第三方浏览器扩展可以个性化和增强您的 Salesforce 体验，但我们建议您查看 AppExchange 以获取来自 Salesforce 合作伙伴的浏览器扩展和应用程序，或查看组件库以获取符合您要求的基本组件。

Salesforce 不提供对第三方浏览器扩展的支持。使用第三方浏览器扩展程序的风险由您自行承担。Salesforce 无法阻止这些扩展程序访问您的 Salesforce 数据，也无法检测到有人试图访问您的数据。

具有 DOM 操作的浏览器扩展

一些第三方浏览器扩展会注入自定义脚本来操作 DOM。出于以下原因，我们不建议也不支持此类第三方浏览器扩展：

操纵 DOM 的浏览器扩展（例如在 DOM 中插入或删除元素）可能会干扰 Lightning Experience 的稳定性并导致意外行为。
不遵循 Salesforce 安全标准的浏览器扩展可能无法在 Lightning Experience 中正常工作。
Lightning Experience 的内部 DOM 结构可能会在将来的版本中更改，并且不保证与第三方浏览器扩展的兼容性。

如果您需要使用 DOM，请检查您是否可以通过 lightning/platformResourceLoader 改用 JavaScript 库。

支持的 JavaScript

要开发 Lightning Web 组件，请使用最新版本的 JavaScript。

LWC 支持与 Lightning Experience 相同的浏览器，即 Edge、Chrome、Firefox 和 Safari 的最新稳定版本。要为这些浏览器开发 Lightning Web 组件，您可以使用浏览器支持且 Lightning Locker 允许的任何 JavaScript 功能。

Lightning Locker 提供组件隔离和安全性，允许来自多个来源的代码使用安全、标准的 API 和事件机制执行和交互。若要编写与 Locker 兼容的代码，请使用 Locker 工具。

Lightning Web Security （LWS）是 Lightning Web 组件的 Lightning Locker 的替代方案。LWS 旨在取代多个版本的 Lightning Locker。有关更多信息，请参阅 Lightning Web 安全。

提示

要学习 JavaScript（或者如果您想复习一下），请从现代 JavaScript 开发 Trailhead 模块开始。

本开发人员指南解释了如何开发 Lightning Web 组件，并记录了特定于 LWC 的 JavaScript 函数，例如用于处理 Salesforce 数据的电线适配器。

本开发人员指南不记录标准 JavaScript，也不教授 JavaScript 基础知识。标准 JavaScript 记录在 Mozilla 开发者网络（MDN） JavaScript 参考中。如果你正在寻找一个函数的文档，请先尝试 MDN。例如，如果您要查找有关的信息，请使用 MDN。addEventListener()

注意

Salesforce 于 2023 年 1 月 1 日终止了对 Internet Explorer 11 的支持。在 Winter ’24 之后，您将无法再使用 Internet Explorer 11 和其他旧版浏览器来查看或访问 Lightning Experience。

支持的 Salesforce 目标和工具

Lightning Web 组件支持与许多 Salesforce 目标和工具一起使用。开发组件时，请在组件的配置文件中指定其目标。

闪电体验
Salesforce 移动应用程序
Lightning 应用程序生成器
Experience Builder 网站
体验生成器
独立应用程序
实用栏
流
Lightning Experience 中的快速操作
自定义选项卡
Gmail 和 Outlook 集成
嵌入式服务聊天
适用于 Visualforce 的 Lightning 组件
闪电输出（测试版）
OmniScripts的
第一代托管软件包
第二代托管软件包
解锁套餐
非托管软件包
更改集

有关更多信息，请参阅在 Salesforce Targets 中使用组件。

不支持将 Lightning Web 组件与这些工具一起使用。要将 Lightning Web 组件与这些工具一起使用，请将该组件包装在 Aura 组件中。

Chatter 扩展
全球行动
列表视图操作
相关列表视图操作
标准操作覆盖
URL 可寻址选项卡

支持的 Salesforce API

Lightning Web 组件支持与许多 Salesforce API 一起使用。您可以通过导入指定的命名空间模块来访问这些 API。并非列出的 Salesforce API 上的所有功能或端点都受支持。lightningCRM 分析 API

使用 CRM Analytics 数据集和仪表板。目前不支持 Analytics 镜头。请参阅 lightning/analyticsWaveApi 电线适配器和功能。

Einstein 发现 API

检索 Einstein Discovery 故事。目前不支持 Einstein 预测和模型。请参阅 lightning/analyticsSmartDataDiscoveryApi 线路适配器和功能。

EMP API

订阅流媒体频道并收听事件消息。请参阅 lightning/empApi 模块。

元数据 API

从组织部署或检索 Lightning Web 组件包。请参阅 LightningComponentBundle 元数据类型。

移动 SDK

在混合应用中运行 LWC。请参阅 Mobile SDK 开发指南。

Salesforce 控制台 API

使用工作区选项卡和子选项卡。请参阅 Workspace API。尚不支持导航项和实用程序栏 API。

Service Cloud 语音工具包 API

访问服务云语音功能。请参阅《Service Cloud Voice 实施指南》。

工具 API

使用工具 API 处理 Lightning Web 组件包。请参阅 LightningComponentBundle 和 LightningComponentResource 对象。

用户界面 API

使用记录、列表视图等。请参阅 Lightning 数据服务线路适配器和功能。

不支持将 Lightning Web 组件与这些工具一起使用。要将 Lightning Web 组件与这些工具一起使用，请将该组件包装在 Aura 组件中。

Lightning 控制台导航项 API
Lightning 控制台实用程序栏 API
对话工具包 API
Omni 工具包 API

如何选择 Lightning Web 组件或 Aura

Lightning Web 组件比 Aura 组件性能更好，更易于开发。但是，在开发 Lightning Web 组件时，您可能还需要使用 Aura，因为 LWC 尚不支持 Aura 所做的一切。

您如何决定将哪些组件开发为 Lightning Web 组件，哪些组件开发为 Aura 组件？

始终选择 Lightning Web 组件，除非您需要不受支持的功能。

要使用不受支持的体验或功能或使用不受支持的界面，请开发一个 Lightning Web 组件，并将其包装在一个 Aura 组件中，该组件只需访问该体验、功能或界面。

注意

Lightning Web 组件不能包含 Aura 组件。当您开发 Lightning Web 组件时，其 DOM 子树必须完全由 Lightning Web 组件组成。

要使用不能用作 Lightning Web 组件的基本组件，您可能需要在 Aura 中开发所有内容（或几乎所有内容）。

API 生命周期终止政策

Salesforce 承诺自首次发布之日起至少 3 年内支持每个 API 版本。为了完善和提高 API 的质量和性能，超过 3 年的版本可能会被弃用或停用。

Salesforce 会在对该版本的支持结束前至少 1 年通知使用计划弃用的 API 版本的客户。

Lightning Web 组件（LWC）已于 19 年春季正式发布，并在 Salesforce API 版本 45.0 及更高版本中受支持。

自定义组件可以使用线路适配器来调用 Salesforce API，例如 Connect REST API 和 UI API。在相应的开发人员指南中查看 API 生命周期终止政策。

如果您请求任何资源或使用已停用的 API 版本中的操作，则 REST API 将返回错误代码。410:GONE

若要识别从旧 API 版本或不受支持的 API 版本发出的请求，请使用免费的 API 总使用量事件类型。

设置开发环境

使用适合您需求的工作流程开发 Lightning Web 组件。我们建议使用 Salesforce DX 工具，但您可能处于不支持这些工具的情况。您仍然可以使用自己喜欢的代码编辑器，并使用自己的工具部署到组织。但是，您无法在开发人员控制台中开发 Lightning Web 组件。

设置编辑器、Linter 和组织

无论您的开发工作流程是什么，您都必须设置代码编辑器、设置 linting 并配置组织才能看到组件的运行情况。

安装代码编辑器

要开发 Lightning Web 组件，请使用您喜欢的代码编辑器。

我们建议使用 Visual Studio Code，因为它的 Salesforce 扩展包提供了用于处理 Salesforce CLI、Lightning 组件框架、Apex 和 Visualforce 的强大功能。

如果您选择使用 Visual Studio Code，请安装它和 Salesforce 扩展包。

Visual Studio Code （VS 代码）
适用于 Visual Studio Code 的 Salesforce 扩展包

我们还建议使用 Prettier 进行代码格式设置。VS Code 可以将 Prettier 安装为扩展。对于其他编辑器，请参阅 Prettier 文档。

注意

您无法在 Salesforce 开发人员控制台中开发 Lightning Web 组件。

设置 Linting

Linting 会在编译之前在编辑时发现代码中的错误。Linting 不仅仅是拼写检查，它还引导您远离反模式，转向良好的模式。Salesforce 创建了 ESLint 规则，以最大程度地减少 Lightning Web 组件编程错误。

如果您使用的是 Salesforce DX 项目，则无需手动设置 linting。请参阅在 Scratch 组织中开发和在非 Scratch 组织中开发。

如果您使用的不是 Salesforce DX 项目，请从命令行安装 ESLint 规则。有关说明，请参阅 github/salesforce/eslint-plugin-lwc 和 github/salesforce/eslint-config-lwc 存储库。

提示

linting 规则有三个配置级别。查看 eslint-config-lwc 自述文件，并选择符合您编码需求的配置。

如果您正在开发要在 Lightning Web Security 中运行的组件，请参阅安装 Lightning Web Security 的 ESLint 规则。

建立开发组织

Developer Edition 注册表单

您可以在临时组织和非临时组织中开发 Lightning Web 组件。若要创建临时组织，请将组织配置为开发人员中心。本地开发需要临时组织。

Salesforce CLI 在临时组织中的工作方式与在非临时组织中的工作方式略有不同。我们创建一个项目，并回顾使用 Salesforce DX 工具进行开发中的工作流程。

注意

从 23 年冬季开始，Lightning Web Security 默认在临时组织中启用。有关更多信息，请参阅在临时组织中启用和禁用 LWS。

在开发组织中启用调试模式

要更轻松地调试 JavaScript 代码，请在组织中启用调试模式。启用调试模式时，框架 JavaScript 代码不会缩小，因此更易于阅读和调试。调试模式还为某些警告和错误添加了更详细的输出。

仅对正在积极开发或调试 JavaScript 的用户启用调试模式。对于启用了 Salesforce 的用户来说，Salesforce 速度较慢。

在 Salesforce 中，从“设置”中输入“快速查找”框，然后选择“调试模式”。Debug Mode
在用户列表中，找到需要启用调试模式的任何用户。如有必要，请使用标准列表视图控件来筛选组织的用户。
启用要为其启用调试模式的用户旁边的选择复选框。
单击启用。

使用 Salesforce DX 工具进行开发

我们建议使用 Salesforce DX 工具，以获得最紧密集成的开发体验。此工作流利用 Salesforce CLI、带有 Salesforce 扩展包的 VS Code 编辑器、Salesforce DX 项目以及临时或沙盒组织。

提示

要使用 Salesforce DX 工具设置您的开发人员环境并创建您的第一个组件，请前往 Trailhead 并完成快速入门：Lightning Web 组件项目。

开发移动组件

在开发 Lightning Web 组件时，不仅要检查桌面上的组件演示，还要检查移动设备上的组件演示，这一点很重要。要在虚拟移动设备上预览组件并在编码时查看更改，请使用 Salesforce CLI 移动扩展插件。然后下载并运行 Salesforce 移动应用程序的虚拟设备版本，以预览您的组件如何与 Salesforce 中的其他组件共存。

《移动和离线开发人员指南》中提供了完整的详细信息，该指南是执行移动开发时本指南的重要配套。

使用您自己的工具进行部署

不使用 Salesforce DX 工具？没关系！使用您自己的工具和元数据 API 部署 Lightning Web 组件。

有时，开发人员和发布管理团队使用不使用 Salesforce DX 工具的部署环境。例如，部署环境可能使用 Eclipse、多个存储库以及 ANT 或 GNU Make 等工具。或者，您的团队可能有一个既定的内部发布流程。虽然我们建议使用我们的工具，但您可以使用元数据以自己的方式部署组件。

要使用软件包和元数据 API 开发和部署 Lightning Web 组件，请按照下列步骤操作。

创建一个包含组件文件和包 .xml 清单文件的 zip 存档。Lightning Web 组件的元数据 API 类型为 LightningComponentBundle。
使用 ANT 迁移工具等工具或您自己的工具将组件部署到沙盒或临时组织。

重要

当您使用 Salesforce CLI 时，您可以在项目和目标临时组织之间进行更改跟踪。如果没有这些工具，您必须提出自己的解决方案。像 Github 这样的存储库会监控代码更改。沙盒支持对数据或字段的更改进行审核。

如果您使用的是 Prettier，请考虑添加一个 pre-commit 钩子，以确保您的代码格式正确。

使用 Lightning Web 组件进行开发的最佳实践

要创建安全高效的 Lightning Web 组件，请遵循 Salesforce 开发人员博客上的开发人员最佳实践列表：

通过开发人员最佳实践清单提高一致性并提高开发人员技能
Lightning Web 组件性能最佳实践
提高您的 LWC 技能 – 第 1 部分
提高您的 LWC 技能 – 第 2 部分

探索 Trailhead 和示例代码

我们创建了 Trailhead 内容和 GitHub 存储库，以快速启动您的 Lightning Web 组件开发。

Lightning Web 组件配方

Lightning Web 组件的易于理解的代码示例集合。每个配方都演示了如何以尽可能少的代码行编写特定任务，同时遵循最佳实践。“查看源代码”链接会将你直接带到 GitHub 中的代码。

这些方法涵盖了所有基础知识：组合、状态管理、事件、数据访问和导航。《Lightning Web 组件开发人员指南》引用了此存储库中的许多方法。

若要开始，请克隆存储库并按照自述文件中的步骤操作。

Trailhead 项目和模块

在构建 Lightning Web 组件路径上获得创建 Lightning Web 组件的实践经验。

对 Lightning Web 组件进行故障排除，并在 Lightning Web 组件故障排除路径中了解最佳实践。

电动自行车示例应用程序

E-Bikes 示例应用程序演示了如何使用 Lightning Web 组件构建应用程序并与 Salesforce Experience 集成。E-Bikes是一家虚构的电动自行车制造商。该应用程序使用丰富的用户体验帮助电动自行车管理其产品和经销商订单。

安装 E-Bikes 示例应用程序。