快速上手：Lightning Web Components

设置 Salesforce DX 环境（01 Set Up Your Salesforce DX Environment）

本单元是动手编码前的地基：了解 Lightning Web Components 是什么、为什么需要 Salesforce DX，然后创建全新的 Trailhead Playground、重置登录凭据，并安装 Salesforce CLI。

学习目标 — 完成本项目后，你将能够：

安装 Salesforce CLI
安装 Visual Studio Code 及 Salesforce DX 扩展
创建并部署一个 Lightning web component

简介（一）：什么是 Lightning Web Components？（Introduction (1): What Is Lightning Web Components?）

Lightning Web Components（LWC） 是一种构建 Lightning 组件的新编程模型：

建立在现代 Web 标准的突破之上
能与现有的 Aura 编程模型共存并互操作
提供前所未有的性能

要创建和开发 Lightning Web Components 并发挥其强大功能和性能优势，你需要设置 Salesforce DX。本 Quick Start 还会用到 Visual Studio Code——Salesforce 平台上推荐的代码编辑器。等环境就绪后，你将编写一个简单的组件，并把它加到 Lightning Experience 的一个页面上。

简介（二）：什么是 Salesforce DX？（Introduction (2): What Is Salesforce DX?）

Salesforce Developer Experience（DX） 是一套能简化整个开发生命周期的工具集：

改进团队开发与协作
便于自动化测试与持续集成（CI）
让发布周期更高效、更敏捷

在本项目中，你要设置的 DX 组件包括：Salesforce CLI（让你从命令行驱动组织和源代码）和 Visual Studio Code + Salesforce 扩展（为你提供编写组件的强大编辑器）。

设置 Trailhead Playground（Set Up Your Trailhead Playground）

在写任何代码之前，你需要一个可以构建的目标组织。接下来两步：创建一个全新的 Trailhead Playground，然后获取用户名并重置密码。两者都需要——因为项目后面要用 Salesforce CLI 对这个 playground 做身份验证，CLI 需要你的凭据才能把源代码和组件推入组织。

创建新的 Trailhead Playground（Create a New Trailhead Playground）

创建全新的 Trailhead Playground：

滚动到页面底部
点击 playground 名称
点击 Create Playground

通常需要 3–4 分钟。为什么必须是全新的？Salesforce 真的是指"全新"——如果你复用现有的组织或 playground，完成项目挑战时可能会遇到问题。一个干净的组织，值得这点短暂的等待。

获取 Playground 用户名与密码（一）：打开组织（Get Username and Password (1): Open Your Org）

接下来获取 playground 凭据。打开你的 Trailhead Playground——如果看到 Get Your Login Credentials 选项卡，直接跳到重置密码；如果没有，从 App Launcher 找到并打开 Playground Starter 并按其步骤操作；如果 Playground Starter 也不出现，Salesforce Help 里有关于如何查找 Trailhead Playground 用户名与密码的文章。

获取 Playground 用户名与密码（二）：重置密码（Get Username and Password (2): Reset the Password）

重置密码的步骤：

点击 Get Your Login Credentials 选项卡，记下你的用户名。
点击 Reset My Password——系统会向与用户名关联的地址发送邮件。
点击邮件中的链接。
输入新密码、确认，点击 Change Password。

把用户名和新密码放在手边——稍后用它们向 Salesforce CLI 授权你的 playground。

安装命令行界面（一）：CLI 的作用（Install the CLI (1): What the CLI Does）

Salesforce CLI 控制着你 Salesforce 应用的完整应用生命周期：

创建用于开发和测试的环境
在你的组织与版本控制系统（VCS）之间同步源代码
执行测试

完整的安装说明见 Salesforce CLI Setup Guide（开发者文档），下面带你走核心步骤。

安装命令行界面（二）：安装与验证（Install the CLI (2): Install and Verify）

安装：

从 Salesforce CLI 页面（Salesforce tools 站点）下载 CLI。
为你的操作系统安装它。

验证：

在命令行运行：sf update
预期输出类似 Updating CLI....——说明 CLI 已安装且为最新版本。

完成后，下一步用 Visual Studio Code 设置本地开发环境。

设置 Visual Studio Code（02 Set Up Visual Studio Code）

本单元安装 Visual Studio Code（Salesforce 开发者的首选编辑器），添加 Salesforce Extension Pack 让编辑器理解你的代码，并在构建第一个组件之前测试一切是否就绪。

安装 Salesforce 扩展（一）：安装 VS Code 与扩展包（Install Salesforce Extensions (1): Install VS Code & the Extension Pack）

Visual Studio Code 是 Salesforce 开发者的首选代码编辑器：免费、开源，支持 Windows、Linux 和 macOS，还有易于安装的扩展来提供语法高亮、代码补全等功能。

安装：

为你的操作系统下载并安装最新版 Visual Studio Code（如果已安装则无需重装）。
启动 Visual Studio Code。
点击左侧工具栏的 Extensions 图标。
搜索 Salesforce Extension Pack，点击 Install。

这个扩展包把 Salesforce 的全部工具链打包进了编辑器。

安装 Salesforce 扩展（二）：JDK 与扩展包（Install Salesforce Extensions (2): JDK & the Expanded Pack）

有两件事值得注意：

Java（JDK）用于 Apex 支持：

Salesforce Extensions 的部分功能（尤其是 Apex 支持）依赖 Java SE Development Kit（JDK）。
需要 JDK 21（推荐）、17 或 11。
如果装了其他版本的 Java，需要再装 JDK 21、17 或 11。
配置方式见 Salesforce Extensions: Java Setup。

扩展包：

还有一个 Salesforce Extension Pack (Expanded) 版本，包含 Salesforce 开发者常用的第三方扩展。
两个扩展包只需装一个。

确保开发环境就绪（一）：测试扩展（Ensure Ready (1): Test Your Extensions）

装好 Visual Studio Code 并启用扩展后，需要确认它们真的能用：

在 VS Code 中，按 Ctrl+Shift+P（Windows）或 Cmd+Shift+P（macOS）打开命令面板（Command Palette）。
输入 sfdx——面板会过滤出 Salesforce Extensions 提供的命令。

看到 SFDX 命令了吗？说明扩展已激活并正常工作。

确保开发环境就绪（二）：继续构建（Ensure Ready (2): Build On）

一个实用小贴士：随着你使用 SFDX 命令，它们会汇集到命令面板的 recently used（最近使用）面板里，让你最常用的操作始终只需一次按键。

确认扩展正常工作后，开发环境就完全就绪了。在最后一步，你将创建第一个 Lightning web component，并把它加到组织的首页。Salesforce 不会检查这些设置，准备好后点击 Verify Step 继续即可。

创建 Hello World Lightning Web Component（03 Create a Hello World Lightning Web Component）

最后的单元——真正构建点东西。你将搭建 Salesforce DX 项目、授权 Trailhead Playground 让 CLI 能推代码进去、创建 Hello World Lightning web component、部署它，最后加到 Lightning Experience 的页面上看它实时运行。

创建 Salesforce DX 项目（一）：搭建项目（Create a Salesforce DX Project (1): Scaffold the Project）

环境就绪后，就可以创建组件了——每个组件都位于一个 Salesforce DX 项目内。在 Visual Studio Code 中，打开命令面板，输入 SFDX 查看扩展命令，选择 SFDX: Create Project，按 Enter 接受标准选项，把项目命名为 HelloWorldLightningWebComponent，再选择一个存放项目的文件夹。这样就得到了构建所用的标准 DX 项目结构。

创建 Salesforce DX 项目（二）：创建并确认（Create a Salesforce DX Project (2): Create & Confirm）

点击 Create Project，Visual Studio Code 会为你生成标准的 Salesforce DX 项目结构——包括 force-app、manifest 等文件夹和项目配置文件。如果出现"是否信任此文件夹中文件的作者"的权限提示，选择 Yes，让编辑器能处理这些生成的文件。这就是你接下来写组件所用的项目脚手架。

授权 Trailhead Playground（一）：运行授权（Authorize (1): Run Authorize）

要把代码推入 playground，CLI 需要先获得授权。在 Visual Studio Code 中打开命令面板，输入 SFDX，选择 SFDX: Authorize an Org。按 Enter 接受 Project Default 登录 URL 选项，再按 Enter 接受默认别名——这会打开 Salesforce 登录页到一个独立的浏览器窗口。

授权 Trailhead Playground（二）：登录并确认（Authorize (2): Log In & Confirm）

用 Trailhead Playground 凭据登录，完成授权。如果浏览器弹出 Allow Access 对话框，点击 Allow。认证完成后，Salesforce CLI 会记住你的凭据，成功消息会确认你的 playground 已连接到项目。此后，每条 SFDX 部署命令都知道该把代码推往哪个组织。

创建 Lightning Web Component（一）：搭建组件（Create a LWC (1): Scaffold the Component）

现在创建组件本身：

打开命令面板（Ctrl+Shift+P / Cmd+Shift+P）。
输入 SFDX。
选择 SFDX: Create Lightning Web Component。
命名为 helloWorld。
按 Enter 接受默认位置 force-app/main/default/lwc——这是 Lightning web components 在项目中的存放位置。
Visual Studio Code 创建组件的起始文件。

创建 Lightning Web Component（二）：认识三个文件（Create a LWC (2): Meet the Three Files）

一个 Lightning web component 其实是一组协同工作的文件：

helloWorld.html——标记（markup），一个定义组件用户界面的模板
helloWorld.js——JavaScript 类，存放组件的数据与行为
helloWorld.js-meta.xml——元数据，声明组件的配置以及它可以被放到哪些页面上

接下来你要分别编辑这三个文件并保存。

创建 Lightning Web Component（三）：helloWorld.html（Create a LWC (3): helloWorld.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>

保存文件。这里 lightning-card 基础组件提供一个带标题的卡片；{greeting} 用花括号渲染 greeting 属性的当前值；下面的 lightning-input 绑定同一个 greeting 值，其 onchange 指向 changeHandler 方法，所以每当你输入文字，屏幕上的问候语都会实时更新。

创建 Lightning Web Component（四）：helloWorld.js（Create a LWC (4): helloWorld.js）

打开 helloWorld.js，把内容替换为：

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

保存文件。组件从 lwc 模块导入 LightningElement，并导出一个继承它的 HelloWorld 类。属性 greeting 初始化为字符串 'World'；changeHandler 是输入框 onchange 事件调用的方法，它读取 event.target.value（用户输入的内容）并赋给 this.greeting。由于模板绑定了 {greeting}，段落会自动更新。

创建 Lightning Web Component（五）：helloWorld.js-meta.xml（Create a LWC (5): helloWorld.js-meta.xml）

打开 helloWorld.js-meta.xml，把内容替换为：

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

保存文件。元数据文件控制组件如何被暴露：isExposed 设为 true 让组件出现在 Lightning App Builder 的组件列表里；targets 声明它允许被放到的位置——lightning__AppPage（应用页）、lightning__RecordPage（记录页）和 lightning__HomePage（首页）。有了这些，你就能把 helloWorld 拖到页面上了。