学习目标

完成本单元后，您将能够：

• 描述每个组件文件的内容。
• 为Lightning Web组件创建JavaScript方法。
• 在组件JavaScript中使用生命周期挂钩。

一些严肃的游戏时间

假设您要独立于Salesforce中的特定对象构建数据显示元素。一个很好的例子是ebikes示例存储库中的 productCard组件。让我们检查一下该卡组件，并从头开始构建我们自己的版本，以便您可以看到它如何演变为成熟的Lightning Web组件。在Lightning Web Components Playground中构建组件的各个部分并探索更多示例时，您将快速获得基础知识。

组件只需要一个文件夹及其名称相同的文件。它们会按名称和位置自动链接。

所有Lightning Web组件都有一个名称空间，该名称空间与文件夹名称之间用连字符分隔。例如，默认名称空间c中文件夹名称为app的Lightning Web组件的标记为<c-app>。您可以main.js在Lightning Web Components Playground中看到这一点。

但是，Salesforce平台不允许在组件文件夹或文件名中使用连字符。如果组件的名称包含多个单词（例如“ mycomponent”）怎么办？您无法命名文件夹和文件my-component，但是我们有一个便捷的解决方案。

使用驼峰式外壳命名您的组件myComponent。驼峰案例组件文件夹名称在标记中映射到kebab-case。在标记中，要引用文件夹名为myComponent的组件，请使用<c-my-component>。

例如，LWC Samples存储库的 viewSource文件夹包含viewSource组件的文件。当hello组件 引用HTML中的viewSource组件时，将使用 c-view-source。

浏览HTML文件

Lightning Web组件HTML文件均包含 template标记。该 template标签包含定义您的组件结构的HTML。让我们看一下ebikes回购中productCard组件的简化版本的HTML。

接下来，将这些示例粘贴到 Lightning Web Components Playground中。

1. 单击新建开始一个新项目。
2. 将以下内容粘贴到app.html中（替换文件中所有现有的HTML）。

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

花括号{}中的标识符绑定到相应JavaScript类中同名的字段。

这是一个支持此HTML的JavaScript文件。将此粘贴到app.js。

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}

预览现在显示带有一些细节的自行车。如果没有，请点击运行。

现在，假设您要显示数据，但是您知道它可能需要一些时间才能加载。您不希望用户想知道怎么回事。您可以在模板中使用 if:false和 if:true条件指令来确定呈现哪些视觉元素。

在“显示”以下内容 div标签没有出现，直到值 ready是 true在HTML文件中。

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <div>Category: {category}</div>
        <div>Material: {material}</div>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

这是一些JavaScript在操场上进行测试。这将保留我们的数据值并设置3秒计时器。3秒后，内容应出现。（当然，这仅用于测试目的。）

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
   ready = false;
   connectedCallback() {
       setTimeout(() => {
           this.ready = true;
       }, 3000);
   }
}

单击运行以查看条件指令的运行。

基础闪电Web组件

现在，您不想从头开始构建所有组件。因此，让我们探索使用基本的Lightning Web组件。当然，还有很多组件，包括字段类型，显示控制器，导航项等等。所有这些都在“组件参考”中列出 。

让我们突出自行车的细节。为此，将上一个示例中的材质和类别的div标签替换为lightning-badge组件。这是HTML。

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

钢铁和山峰这两个字作为徽章出现。就这么简单。

好。让我们看一下JavaScript。

使用JavaScript

这是使事情发生的地方。到目前为止，您已经看到，JavaScript方法定义了如何处理输入，数据，事件，状态更改等，以使组件正常工作。

Lightning Web组件的JavaScript文件必须至少包含此代码，其中 MyComponent是您分配的组件类的名称。

import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
}

该 export语句定义了扩展 LightningElement该类的类。最佳做法是，类的名称通常与JavaScript类的文件名匹配，但这不是必需的。

LWC模块

Lightning Web Components使用模块（ECMAScript 6中引入了内置模块）来捆绑核心功能，并使组件文件中的JavaScript可以访问它。Lightning Web组件的核心模块是 lwc。

从import语句开始模块，并指定组件使用的模块功能。

该 import语句指示JavaScript使用模块中的 LightningElement功能 lwc。

// import module elements
import { LightningElement} from 'lwc';
// declare class to expose the component
export default class App extends LightningElement {
    ready = false;
    // use lifecycle hook
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

• LightningElement是Lightning Web组件的基类，它允许我们使用connectedCallback()。
• 该connectedCallback()方法是我们生命周期的钩子之一。在下一节中，您将了解有关生命周期挂钩的更多信息。现在，知道在将组件插入文档对象模型（DOM）中时触发该方法。在这种情况下，它将启动计时器。

生命周期挂钩

Lightning Web Components提供了一些方法，使您可以将代码“挂钩”到组件生命周期中的关键事件。这些事件包括组件何时为：

• 已建立
• 添加到DOM
• 在浏览器中呈现
• 遇到错误
• 已从DOM中删除

使用回调方法响应任何这些生命周期事件。例如，将 connectedCallback()组件插入DOM时将调用。disconnectedCallback()当从DOM中删除组件时， 将调用。

在我们用来测试条件渲染的JavaScript文件中，connectedCallback()当组件插入DOM时，我们使用了该 方法自动执行代码。代码等待3秒钟，然后设置ready为 true。

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    ready = false;
    connectedCallback() {
        setTimeout(() => {
            this.ready = true;
        }, 3000);
    }
}

另外，请注意，我们使用了 this关键字。如果您已经编写了JavaScript，那么关键字的用法应该很熟悉，并且其行为就像在其他环境中一样。thisJavaScript中的 关键字指的是当前上下文的顶层。在这里，上下文是此类。该 connectedCallback()方法为顶级就绪变量分配值。这是一个很好的例子，说明了Lightning Web Components如何将JavaScript功能引入您的开发。您可以this在参考资料小节中找到有关良好信息的链接 。

我们发展很快，您已经可以尝试一些方法。在下一个单元中，我们将退后一步，进一步讨论组件所处的环境。

装饰工

装饰器通常在JavaScript中用于修改属性或函数的行为。

要使用装饰器，请从lwc模块导入装饰器， 并将其放置在属性或函数之前。

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{
    @api message;
}

您可以导入多个装饰器，但是一个属性或函数只能有一个装饰器。例如，属性不能具有 @api和 @wire装饰器。

Lightning Web Components装饰器的示例包括：

• @api：将字段标记为公共。公共属性定义组件的API。在其HTML标记中使用该组件的所有者组件可以访问该组件的公共属性。所有公共属性都是反应性的，这意味着框架会观察该属性以进行更改。当属性值更改时，框架会做出反应并重新渲染组件。
  提示字段和属性几乎是可以互换的术语。组件作者在JavaScript类中声明字段。该类的实例具有属性。对于组件使用者，字段是属性。在Lightning Web组件中，只有组件作者@api用来装饰的字段才可以作为对象属性公开给消费者。
• @track：告诉框架观察对象属性或数组元素的更改。如果发生更改，框架将重新渲染该组件。所有字段都是反应性的。如果字段的值发生更改，并且该字段在模板中使用（或在模板中使用的属性的获取器中使用），则框架将重新渲染该组件。您无需使用修饰字段@track。使用@track如果一个字段包含一个对象或数组只，如果你想的框架来观察更改对象的属性或数组的元素。如果要更改整个属性的值，则无需使用@track。
  在20年春季之前，您必须使用@track将字段（也称为私有属性）标记为反应性。您不再需要这样做。使用@track只告诉框架来观察变化为对象的属性，或为数组的元素。一些旧的示例可能仍会@track在不需要的地方使用，但这没关系，因为使用装饰器不会更改功能或破坏代码。有关更多信息，请参见此 发行说明。
• @wire：为您提供一种从Salesforce组织获取和绑定数据的简便方法。

这是一个使用@api装饰器从另一个组件（应用程序）中的一个组件（自行车）渲染值的示例 。在组件游乐场中，文件如下所示：

该应用程序组件使用以下HTML。

<!-- app.html -->
<template>
<div>
    <c-bike bike={bike}></c-bike>
</div>
</template>

该应用程序组件使用以下JavaScript。

// app.js
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    bike = {
        name: 'Electra X4',
        picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'
    };
}

自行车组件使用以下HTML。

<!-- bike.html -->
<template>
    <img src={bike.picture} alt="bike picture" />
    <p>{bike.name}</p>
</template>

自行车组件使用以下JavaScript。

// bike.js
import { LightningElement, api } from 'lwc';
export default class Bike extends LightningElement {
    @api bike;
}

在带有和不带有@api装饰器的组件游乐场中尝试一下， 以查看行为。

奖金！在操场上尝试这些组件

既然您已经熟悉了组件操场，那么花点时间尝试一下Lightning Web Components Recipes中的一些示例 。尝试将其中的示例中的一些HTML，JavaScript和CSS粘贴到组件游乐场中，这是熟悉核心组件概念的一种好方法。

学习目标

完成本单元后，您将能够：

• 解释Lightning Web Components编程模型。
• 列出使用Lightning Web组件的好处。
• 查找开始开发Lightning Web组件所需的条件。

Web标准编程的门户

现在是时候将您的Salesforce知识和对HTML，JavaScript和CSS等标准技术的熟悉程度结合在一起，以构建下一代Salesforce应用程序。使用这些通用标准为您的Salesforce组织构建组件，同时保持与现有Aura组件的兼容性。

Lightning Web Components专注于开发人员和用户体验。因为我们为现有技术打开了大门，所以您可以利用在Salesforce之外开发的技能来构建Lightning Web组件。您可以使用所有这些功能，而不必放弃使用Aura组件已经完成的工作。

在您进一步之前

您应该对Salesforce DX项目和Salesforce CLI有基本的了解。您还需要在Trailhead帐户中使用正确配置的组织，并在Salesforce Extension Pack中使用VS Code。您可以通过完成快速入门：闪电Web组件了解所有这些 信息。

如果您使用的是附加到Trailhead帐户的Developer Edition组织，则需要在安装程序中部署“我的域”（Trailhead Playground组织会自动部署“我的域”）。

为什么要使用闪电Web组件？

现代浏览器基于Web标准，并且不断发展的标准正在不断改进浏览器可以呈现给用户的内容。我们希望您能够利用这些创新。

Lightning Web Components使用核心 Web Components标准，仅提供在Salesforce支持的浏览器中良好运行所必需的内容。因为它基于在浏览器中本地运行的代码构建，所以Lightning Web Components是轻量级的，并具有出色的性能。您编写的大多数代码都是标准的JavaScript和HTML。

您会发现更容易：

• 在网上常见的地方找到解决方案。
• 寻找具有必要技能和经验的开发人员。
• 利用其他开发人员的经验（甚至在其他平台上）。
• 发展更快。
• 利用完整的封装，使组件更加通用。

而且这并不像Web组件是新的。实际上，浏览器多年来一直在创造这些东西。实例包括 <select>， <video>， <input>，和作为比容器更任何标签。这些元素实际上等效于Web组件。我们的目标是将这种集成水平带入Salesforce开发。

简单组件创建

遵守Web标准的好处是简单。您无需增加特定框架的怪癖。您只需使用HTML，JavaScript和CSS创建组件。闪电Web组件的创建是一个，两个，三个步骤。我不是在开玩笑。真的就是这么简单。您创建（1）JavaScript文件，（2）HTML文件，以及可选的（3）CSS文件。

• HTML提供了组件的结构。
• JavaScript定义了核心业务逻辑和事件处理。
• CSS为您的组件提供外观，感觉和动画。

这些是您组件的基本组成部分。

这是一个非常简单的Lightning Web组件，它在输入字段中显示“ Hello World”。

的HTML

<template>
    <input value={message}></input>
</template>

该template标签是一个组件的HTML的基本构建块。它允许您存储HTML片段。

的JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

稍后我们还将介绍import语句和类声明的详细信息。

的CSS

input {
   color: blue;
}

至少，您真正需要的只是在同一文件夹中具有相同名称（也具有匹配名称）的HTML文件和JavaScript文件。您将它们部署到带有一些元数据的组织中，一切顺利。Salesforce会编译您的文件并自动为您处理样板组件的构造。

闪电Web组件游乐场

让我们去游乐场。我们已经创建了一个空间，您可以在其中试用组件，进行修改，并查看即时结果。

1. 转到 https://developer.salesforce.com/docs/component-library/tools/playground第一次到达那里时，您会看到一个可以探索的示例。它包括Lightning Design System CSS框架中的样式。这些样式提供了与Lightning Experience一致的外观。它还包含一些标准的Lightning Web组件，例如lightning-combobox。
2. 现在，我们只想测试基础知识。在操场上，单击“新建”。
3. 将上述HTML，JavaScript和CSS示例复制到操场上相应的应用程序文件中。
4. 点击运行。恭喜你！您已经创建了一个组件。

如果返回到 初始的Playground页面，您将再次看到默认示例，并且可以开始一个新项目。

闪电Web组件和Aura组件可以协同工作

想知道是否可以保留现有的Aura组件？是的你可以！您可以使用Lightning Web组件，而无需放弃现有组件。您最终可能会将现有组件迁移到Lightning Web Component模型，但是我们将引入Lightning Web组件，而不会脱离Aura组件的现有支持。Aura组件和Lightning Web组件可以很好地协作。

实际上，Aura组件可以包含Lightning Web组件（尽管反之亦然）。但是，纯Lightning Web组件实现提供了完全的封装，并不断发展对通用标准的遵守。

可以使用的很酷的东西

要有效地开发Lightning Web组件，请使用以下工具和环境。

Dev Hub和Scratch Orgs Scratch组织是一次性的Salesforce组织，以支持开发和测试。开发中心是一项功能，可管理您的临时组织。两者都是Salesforce DX工具集的一部分。Salesforce DX是由Salesforce构建和支持的一组集成开发工具。 Salesforce命令行界面（CLI） Salesforce CLI提供了一种快速的方法来运行用于创建和配置临时组织以及部署组件的操作。这也是Salesforce DX工具集的一部分。 Lightning组件库有关Aura和Lightning Web组件以及如何使用它们的参考，请参见 https://developer.salesforce.com/docs/component-library/overview/components。

您也可以通过组织的实例查看该库，网址为http：// <instance> .lightning.force.com / docs / component-library。通过查看实例中的库，您只会看到组织的正确版本。而且，当您创建自己的自定义组件时，它们也会出现在库中。

GitHub我们通过GitHub存储库共享扩展，示例等。获取一个GitHub帐户，以确保您可以利用这些产品。 Visual Studio代码Salesforce扩展包我们将Visual Studio视为开发工具，为您提供用于构建组件的集成环境。适用于Visual Studio Code的Salesforce扩展包提供了代码提示，棉绒警告和内置命令：https : //marketplace.visualstudio.com/items?itemName= salesforce.salesforcedx-vscode 。 Lightning Web组件食谱我们提供了一个GitHub存储库，以帮助您了解Lightning Web组件的工作方式。您可以克隆，修补并将这些样本混合发布到您自己的临时组织中，并查看它们的实际效果。拿到 https://github.com/trailheadapps/lwc-recipes。 电动自行车演示此GitHub存储库是查看Lightning Web组件如何工作的另一种好方法。电动自行车演示是Lightning Web组件的端到端实现，以创建应用程序。在您自己的临时组织中尝试此示例。在https://github.com/trailheadapps/ebikes-lwc上获取它 。 Lightning Data Service（LDS）通过Lightning Data Service从Salesforce访问数据和元 数据。与数据配合使用的基础Lightning组件基于LDS构建。自定义您自己的组件，以利用LDS缓存，变更跟踪，性能等优势。 防雷柜通过具有Lightning Locker的安全性，可以保护属于一个名称空间的Lightning Web组件免受其他名称空间中的组件的影响 。通过仅允许访问受支持的API并消除对未发布框架内部的访问，Lightning Locker还倡导了最佳实践，这些最佳实践提高了代码的可支持性。

展望未来

在您准备将文件部署到临时组织之前，我们将继续使用Lightning Web Components Playground作为另一个单元。在操场上，我们将看到您可以使用HTML和JavaScript文件做什么。

学习目标

完成本单元后，您将能够：

• 解释Lightning Web Components编程模型。
• 列出使用Lightning Web组件的好处。
• 查找开始开发Lightning Web组件所需的条件。

Web标准编程的门户

现在是时候将您的Salesforce知识和对HTML，JavaScript和CSS等标准技术的熟悉程度结合在一起，以构建下一代Salesforce应用程序。使用这些通用标准为您的Salesforce组织构建组件，同时保持与现有Aura组件的兼容性。

Lightning Web Components专注于开发人员和用户体验。因为我们为现有技术打开了大门，所以您可以利用在Salesforce之外开发的技能来构建Lightning Web组件。您可以使用所有这些功能，而不必放弃使用Aura组件已经完成的工作。

在您进一步之前

您应该对Salesforce DX项目和Salesforce CLI有基本的了解。您还需要在Trailhead帐户中使用正确配置的组织，并在Salesforce Extension Pack中使用VS Code。您可以通过完成快速入门：闪电Web组件了解所有这些 信息。

如果您使用的是附加到Trailhead帐户的Developer Edition组织，则需要在安装程序中部署“我的域”（Trailhead Playground组织会自动部署“我的域”）。

为什么要使用闪电Web组件？

现代浏览器基于Web标准，并且不断发展的标准正在不断改进浏览器可以呈现给用户的内容。我们希望您能够利用这些创新。

Lightning Web Components使用核心 Web Components标准，仅提供在Salesforce支持的浏览器中良好运行所必需的内容。因为它基于在浏览器中本地运行的代码构建，所以Lightning Web Components是轻量级的，并具有出色的性能。您编写的大多数代码都是标准的JavaScript和HTML。

您会发现更容易：

• 在网上常见的地方找到解决方案。
• 寻找具有必要技能和经验的开发人员。
• 利用其他开发人员的经验（甚至在其他平台上）。
• 发展更快。
• 利用完整的封装，使组件更加通用。

而且这并不像Web组件是新的。实际上，浏览器多年来一直在创造这些东西。实例包括 <select>， <video>， <input>，和作为比容器更任何标签。这些元素实际上等效于Web组件。我们的目标是将这种集成水平带入Salesforce开发。

简单组件创建

遵守Web标准的好处是简单。您无需增加特定框架的怪癖。您只需使用HTML，JavaScript和CSS创建组件。闪电Web组件的创建是一个，两个，三个步骤。我不是在开玩笑。真的就是这么简单。您创建（1）JavaScript文件，（2）HTML文件，以及可选的（3）CSS文件。

• HTML提供了组件的结构。
• JavaScript定义了核心业务逻辑和事件处理。
• CSS为您的组件提供外观，感觉和动画。

这些是您组件的基本组成部分。

这是一个非常简单的Lightning Web组件，它在输入字段中显示“ Hello World”。

的HTML

<template>
    <input value={message}></input>
</template>

该template标签是一个组件的HTML的基本构建块。它允许您存储HTML片段。

的JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

稍后我们还将介绍import语句和类声明的详细信息。

的CSS

input {
   color: blue;
}

至少，您真正需要的只是在同一文件夹中具有相同名称（也具有匹配名称）的HTML文件和JavaScript文件。您将它们部署到带有一些元数据的组织中，一切顺利。Salesforce会编译您的文件并自动为您处理样板组件的构造。

闪电Web组件游乐场

让我们去游乐场。我们已经创建了一个空间，您可以在其中试用组件，进行修改，并查看即时结果。

1. 转到 https://developer.salesforce.com/docs/component-library/tools/playground第一次到达那里时，您会看到一个可以探索的示例。它包括Lightning Design System CSS框架中的样式。这些样式提供了与Lightning Experience一致的外观。它还包含一些标准的Lightning Web组件，例如lightning-combobox。
2. 现在，我们只想测试基础知识。在操场上，单击“新建”。
3. 将上述HTML，JavaScript和CSS示例复制到操场上相应的应用程序文件中。
4. 点击运行。恭喜你！您已经创建了一个组件。

如果返回到 初始的Playground页面，您将再次看到默认示例，并且可以开始一个新项目。

闪电Web组件和Aura组件可以协同工作

想知道是否可以保留现有的Aura组件？是的你可以！您可以使用Lightning Web组件，而无需放弃现有组件。您最终可能会将现有组件迁移到Lightning Web Component模型，但是我们将引入Lightning Web组件，而不会脱离Aura组件的现有支持。Aura组件和Lightning Web组件可以很好地协作。

实际上，Aura组件可以包含Lightning Web组件（尽管反之亦然）。但是，纯Lightning Web组件实现提供了完全的封装，并不断发展对通用标准的遵守。

可以使用的很酷的东西

要有效地开发Lightning Web组件，请使用以下工具和环境。

Dev Hub和Scratch Orgs Scratch组织是一次性的Salesforce组织，以支持开发和测试。开发中心是一项功能，可管理您的临时组织。两者都是Salesforce DX工具集的一部分。Salesforce DX是由Salesforce构建和支持的一组集成开发工具。 Salesforce命令行界面（CLI） Salesforce CLI提供了一种快速的方法来运行用于创建和配置临时组织以及部署组件的操作。这也是Salesforce DX工具集的一部分。 Lightning组件库有关Aura和Lightning Web组件以及如何使用它们的参考，请参见 https://developer.salesforce.com/docs/component-library/overview/components。

您也可以通过组织的实例查看该库，网址为http：// <instance> .lightning.force.com / docs / component-library。通过查看实例中的库，您只会看到组织的正确版本。而且，当您创建自己的自定义组件时，它们也会出现在库中。

GitHub我们通过GitHub存储库共享扩展，示例等。获取一个GitHub帐户，以确保您可以利用这些产品。 Visual Studio代码Salesforce扩展包我们将Visual Studio视为开发工具，为您提供用于构建组件的集成环境。适用于Visual Studio Code的Salesforce扩展包提供了代码提示，棉绒警告和内置命令：https : //marketplace.visualstudio.com/items?itemName= salesforce.salesforcedx-vscode 。 Lightning Web组件食谱我们提供了一个GitHub存储库，以帮助您了解Lightning Web组件的工作方式。您可以克隆，修补并将这些样本混合发布到您自己的临时组织中，并查看它们的实际效果。拿到 https://github.com/trailheadapps/lwc-recipes。 电动自行车演示此GitHub存储库是查看Lightning Web组件如何工作的另一种好方法。电动自行车演示是Lightning Web组件的端到端实现，以创建应用程序。在您自己的临时组织中尝试此示例。在https://github.com/trailheadapps/ebikes-lwc上获取它 。 Lightning Data Service（LDS）通过Lightning Data Service从Salesforce访问数据和元 数据。与数据配合使用的基础Lightning组件基于LDS构建。自定义您自己的组件，以利用LDS缓存，变更跟踪，性能等优势。 防雷柜通过具有Lightning Locker的安全性，可以保护属于一个名称空间的Lightning Web组件免受其他名称空间中的组件的影响 。通过仅允许访问受支持的API并消除对未发布框架内部的访问，Lightning Locker还倡导了最佳实践，这些最佳实践提高了代码的可支持性。

展望未来

在您准备将文件部署到临时组织之前，我们将继续使用Lightning Web Components Playground作为另一个单元。在操场上，我们将看到您可以使用HTML和JavaScript文件做什么。

创建一个Hello World Lightning Web组件

设置Visual Studio代码

设置Visual Studio代码

学习目标

在此项目中，您将：

• 安装Salesforce CLI。
• 安装用于Salesforce DX的Visual Studio代码和扩展。
• 创建和部署Lightning Web组件。

介绍

Lightning Web Components是用于构建Lightning组件的新编程模型。它利用了Web标准的突破，可以与Aura编程模型共存和互操作，并提供无与伦比的性能。要创建和开发Lightning Web Components并利用其强大的功能和性能优势，您需要设置Salesforce DX。对于此快速入门，您还可以使用Visual Studio Code，这是在Salesforce平台上开发的推荐代码编辑器。准备好开发人员环境后，您将学习如何编写简单的Lightning Web组件并将其添加到Lightning Experience中的页面。

Salesforce开发人员体验（DX）是一组可简化整个开发生命周期的工具。它改善了团队开发和协作，促进了自动化测试和持续集成，并使发布周期更加有效和敏捷。

设置您的Trailhead游乐场

创建一个新的Trailhead游乐场。

1. 要创建新的Trailhead Playground，请点击此步骤末尾的下拉菜单，然后选择Create a Trailhead Playground。
   
2. 拥有Trailhead游乐场后，点击启动。

重置你的密码。您需要用户名和密码，以在以后的步骤中使用Salesforce CLI对Trailhead Playground进行身份验证。

如果您在组织中看到一个标签为Get Your Login Credentials的标签，那就太好了！请按照以下步骤操作。如果不是，请从App Launcher（）中找到并选择Playground Starter，然后按照以下步骤操作。如果您没有看到Playground Starter应用程序，请在Trailhead帮助中签出 查找Trailhead Playground的用户名和密码。

1. 单击获取您的登录凭据选项卡，并记下您的用户名。
2. 单击重置我的密码。这会将电子邮件发送到与您的用户名关联的地址。
3. 单击电子邮件中的链接。
4. 输入新密码，确认，然后单击更改密码。

安装命令行界面（CLI）

使用Salesforce CLI来控制Salesforce应用程序的整个应用程序生命周期。有了它，您可以轻松地创建用于开发和测试的环境，在组织和VCS之间同步源代码，并执行测试。

1. 使用下面的链接安装CLI。
   

   操作系统	链接到安装程序
   苹果系统	https://sfdc.co/sfdx_cli_osx 右键单击刚下载的应用程序，然后单击“打开”。如果看到警告，请单击“打开”。 该警告会告诉您，该应用程序尚未由确定的开发人员向Apple注册。在这种情况下，您知道该应用来自受信任的来源，因此可以将其打开。通常，在打开之前，请仔细检查从Internet下载的应用程序-或将它们发送给公司的安全团队以进行检查。
   Windows 32位	https://sfdc.co/sfdx_cli_win 如果您不是计算机上的唯一帐户，则可能需要使用bin目录更新您的类路径。
   Windows 64位	https://sfdc.co/sfdx_cli_win64 如果您不是计算机上的唯一帐户，则可能需要使用bin目录更新您的类路径。
   Debian / Ubuntu 64	https://sfdc.co/sfdx_cli_linux 从清单中的URL之一下载档案，提取档案，然后运行./install脚本。
   Debian / Ubuntu x86	https://sfdc.co/sfdx_cli_linux_x86 从清单中的URL之一下载档案，提取档案，然后运行./install脚本。

2. 让我们确保正确安装了CLI，并且您知道如何访问命令的联机帮助。在命令窗口中，输入sfdx。您会看到以下内容：

   Salesforce CLI
   VERSION
     sfdx-cli/7.36.0-sfdx-cli/7.36.0-b1c4e9c7c8 darwin-x64 node-v10.15.3
   USAGE
     $ sfdx [COMMAND]
   COMMANDS
     commands  list all the commands
     force     tools for the Salesforce developer
       

在下一步中，我们使用Visual Studio Code设置本地开发环境。