快速入门：闪电Web组件 – 创建一个Hello World Lightning Web组件

创建一个Hello World Lightning Web组件

现在，您已经设置了开发环境，您可以创建一个简单的Lightning Web组件。

创建一个Salesforce DX项目

在Visual Studio Code中，通过按Ctrl + Shift + P（Windows）或Cmd + Shift + P（macOS）打开命令面板。
输入SFDX。
选择SFDX：创建项目。
按Enter接受标准选项。
输入HelloWorldLightningWebComponent作为项目名称。
按Enter键。
选择一个文件夹来存储项目。
单击创建项目。您应该在基本设置中看到类似这样的内容。

授权您的Trailhead游乐场

在Visual Studio Code中，通过按Ctrl + Shift + P（Windows）或Cmd + Shift + P（macOS）打开命令面板。
输入SFDX。
选择SFDX：授权组织。
按Enter接受“项目默认登录URL”选项。
按Enter接受默认别名。
这将在单独的浏览器窗口中打开Salesforce登录。
使用您的Trailhead Playground凭据登录。
如果提示允许访问，请单击允许。
在浏览器中进行身份验证后，CLI会记住您的凭据。成功消息应如下所示：

创建一个闪电Web组件

在Visual Studio Code中，通过按Ctrl + Shift + P（Windows）或Cmd + Shift + P（macOS）打开命令面板。
输入SFDX。
选择SFDX：创建Lightning Web组件。不要使用SFDX：创建闪电组件。（这将创建一个Aura组件。）
输入helloWorld新组件的名称。
按Enter接受默认值force-app/main/default/lwc.
按Enter键。
在Visual Studio Code中查看新创建的文件。

在HTML文件中helloWorld.html，复制并粘贴以下代码。

<template>
  <lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
    </div>
  </lightning-card>
</template>

保存文件。

在JavaScript文件中helloWorld.js，复制并粘贴以下代码。

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
  greeting = 'World';
  changeHandler(event) {
    this.greeting = event.target.value;
  }
}

保存文件。

在XML文件中helloWorld.js-meta.xml，复制并粘贴以下代码。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

保存文件。

部署到您的Trailhead游乐场

右键单击下的default文件夹force-app/main。
单击SFDX：将源部署到组织。
在集成终端的“输出”选项卡中，查看部署结果。您还应该收到一条声明，指出：SFDX: Deploy Source to Org ... ended with exit code 0。这意味着命令已成功运行。

在Lightning Experience中将组件添加到App

在Visual Studio Code中，通过按Ctrl + Shift + P（Windows）或Cmd + Shift + P（macOS）打开命令面板。
输入SFDX。
选择SFDX：打开Default Org。
这将在单独的浏览器中打开您的Trailhead Playground。
在应用启动器（）中，找到并选择销售。
单击然后选择“编辑页面”。
将helloWorldLightning Web组件从Lightning Components列表的Custom区域拖到Page Canvas的顶部。
点击保存。
点击激活。
单击分配为组织默认值。
点击保存。
再次单击保存，然后单击以返回到页面。
刷新页面以查看新组件。

您已经正式制作了第一个Lightning Web组件！

快速入门：闪电Web组件 – 设置Visual Studio代码

设置Visual Studio代码

安装用于Visual Studio Code的Salesforce Extensions

Visual Studio Code是Salesforce开发人员的首选代码编辑器。它是免费的开放源代码，可用于Windows，Linux和macOS。该编辑器具有易于安装的扩展程序，用于语法高亮显示，代码完成等。

在此项目中，我们将安装Visual Studio Code和推荐的Salesforce Extension Pack。

下载并为您的操作系统安装最新版本的 Visual Studio Code。如果您已经安装了Visual Studio Code，则无需重新安装它。
启动Visual Studio代码。
在左侧工具栏上，单击扩展图标。
搜索Salesforce Extension Pack并单击安装。

注意

Salesforce Extensions for Visual Studio Code中的某些功能（尤其是Apex支持）取决于Java平台标准版开发套件（JDK）。仅支持JDK 8和11。如果安装了其他版本的Java，则还需要安装JDK 8或JDK11。一旦安装了正确的JDK，请使用以下链接来配置设置：

Salesforce扩展：Java设置
Salesforce Extensions：设置您的Java版本

确保您的开发环境准备就绪

既然您已经安装了Visual Studio Code并启用了必要的扩展，则需要对其进行测试。

在Visual Studio Code中，通过按Ctrl + Shift + P（Windows）或Cmd + Shift + P（macOS）打开命令面板。
输入sfdx以过滤由Salesforce Extensions提供的命令。

当您使用更多SFDX命令时，这些命令将显示在recently used面板中。

在最后一步中，您将创建第一个Lightning Web组件并将其添加到组织的主页中。

我们不会检查您的任何设置。单击验证步骤转到项目的下一步。

快速入门：闪电Web组件 – 设置Visual Studio代码

设置Visual Studio代码

安装用于Visual Studio Code的Salesforce Extensions

在此项目中，我们将安装Visual Studio Code和推荐的Salesforce Extension Pack。

下载并为您的操作系统安装最新版本的 Visual Studio Code。如果您已经安装了Visual Studio Code，则无需重新安装它。
启动Visual Studio代码。
在左侧工具栏上，单击扩展图标。
搜索Salesforce Extension Pack并单击安装。

注意

Salesforce扩展：Java设置
Salesforce Extensions：设置您的Java版本

确保您的开发环境准备就绪

既然您已经安装了Visual Studio Code并启用了必要的扩展，则需要对其进行测试。

在Visual Studio Code中，通过按Ctrl + Shift + P（Windows）或Cmd + Shift + P（macOS）打开命令面板。
输入sfdx以过滤由Salesforce Extensions提供的命令。

当您使用更多SFDX命令时，这些命令将显示在recently used面板中。

在最后一步中，您将创建第一个Lightning Web组件并将其添加到组织的主页中。

我们不会检查您的任何设置。单击验证步骤转到项目的下一步。

快速入门：闪电Web组件 – 设置您的Salesforce DX环境

学习目标

在此项目中，您将：

安装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游乐场。

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

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

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

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

安装命令行界面（CLI）

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

使用下面的链接安装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脚本。

让我们确保正确安装了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设置本地开发环境。