一、部署 Visualforce 到 LWC 示例应用
本单元面向 Visualforce 开发者：学习为什么创建这个示例应用，获取新 playground、凭据与 Git，用 VS Code 部署应用。
学完本项目，你将能够：部署 Visualforce 到 LWC 示例应用、探索应用及示例代码、了解五个关键模式如何实现为 Lightning Web Components。
Visualforce 到 LWC 示例应用（1）：为何创建它
Visualforce 是流行且被广泛采用的技术，很多开发者维护着 Visualforce 页面，甚至一些新项目仍选择它。从 Visualforce 转到 Lightning Web Components 可能让人望而生畏。这个示例应用就是为帮你走上 LWC 编程之路而创建的：它把 Visualforce 中常用的模式与等价的 Lightning Web Component 并排展示，提供两种实现的代码供你对比，看 LWC 代码与你熟悉的 Visualforce 代码有何不同，你还可以复制、粘贴、改编并自己试验。
Visualforce 到 LWC 示例应用（2）：应用展示什么
应用显示四种布局模式——page blocks、panel grid、panel bar 与 tabs——每个示例都有 Visualforce 实现与 LWC 实现供直接对比。有些 Visualforce 概念可直接迁移到 LWC，有些则完全不同。
配套模块 Lightning Web Components for Visualforce Developers 把 Visualforce 概念映射到 LWC，并指出开发 LWC 与 Visualforce 的根本区别。可在探索本应用之前或之后学习，二者互补，一起给你完整的图景。
Visualforce 到 LWC 示例应用（3）：关于项目与前置条件
本项目从 Trailhead Sample Gallery 安装示例应用，其中示例代码可作为开发自己组件的起步。开始前需先完成 Quick Start: Lightning Web Components（设置 Salesforce DX 开发环境）。Salesforce DX 工具集包括 Salesforce CLI、Visual Studio Code（含 Salesforce Extension Pack）与 Git（用于克隆示例仓库）。
新建 Trailhead Playground
为本项目创建一个全新的 Trailhead Playground：滚动到页面底部，点击 Launch 旁的下拉箭头，选择 Create a Trailhead Playground，约需 3-4 分钟。确实必须是新的——用现有 org 或 playground 可能在完成挑战时遇到问题。
获取 Playground 用户名与密码（1）：打开
获取 playground 凭据：若未打开，先点击页面底部的 Launch。若看到 Get Your Login Credentials 标签即可跳到重置密码；否则从 App Launcher 打开 Playground Starter。若找不到 Playground Starter，可查 Salesforce Help 的文章 Find the Username and Password for Your Trailhead Playground。
获取 Playground 用户名与密码（2）：重置密码
点击 Get Your Login Credentials 标签记下用户名，点击 Reset My Password 触发一封邮件，点击邮件中的链接，输入新密码并确认，点击 Change Password。保存好凭据——稍后从 VS Code 授权并部署应用时会用到。
获取 Git 命令行
要克隆示例应用仓库需要 Git。从 git-scm.com 安装 Git、接受默认设置，然后在 Terminal（macOS）或 Command Prompt（Windows）输入 git 确认——输出一串 git 命令即表示就绪。
部署应用（1）：打开 VS Code 与终端
工具就绪后用 Visual Studio Code 部署应用：打开 VS Code，从 View 菜单打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），从 Terminal 菜单打开新终端——这是粘贴 readme 命令的地方。
部署应用（2）：运行 readme 命令
按项目 readme（GitHub 上 visualforce-to-lwc 仓库）的说明部署：克隆仓库、授权 playground、把应用推上去。部署完成后，Visualforce 到 LWC 示例应用就设置好了，下一步即可探索应用本身。
二、探索 Visualforce 到 LWC 示例应用
本单元游览应用，看五个关键模式的示例，展示你熟悉的 Visualforce 功能如何在 Lightning Web Component 中实现。
使用应用（1）：两种探索方式
因为已克隆 visualforce-to-lwc 仓库，有两种方式进入应用：在 VS Code 打开该文件夹直接看源码，或在 Trailhead Playground 游览刚安装的应用。让我们从应用开始——游览中你会看到熟悉的 Visualforce 功能如何映射到 LWC 组件示例。
使用应用（2）：五个关键模式
本应用探索五个关键模式：查看带父记录数据的单条记录（如账户 + 其所有者）；带记录链接的列表（每行链接到记录）；带父记录数据的列表（如账户所有者）；分页列表（带页面导航控件）；一键创建两条不同类型的记录。我们不会深入每一行代码，而是展示你熟悉的 Visualforce 功能如何在这些 LWC 示例中实现。逐一讲解。
单条记录（1）：查看示例
点击 Single Records 标签 → Take me there!，查看 View Record with Parent Record Data 卡片——它演示如何显示账户记录及其父记录数据（账户所有者），字段包括账户名、电话、账户类型与所有者名（父记录数据）。
同一个示例既有 Visualforce 实现，也有 Lightning Web Component 实现。
单条记录（2）：对比 VF 与 LWC 代码
对比两种实现：点击 View Visualforce source——Visualforce 版本用 apex:form 与标准控制器字段渲染记录详情；点击 View LWC source——LWC 版本把 lightning-record-view-form 基础组件与 getRecord wire adapter（由 Lightning Data Service 驱动）结合来检索记录与字段。LWC 的胜出之处：Lightning Data Service 自动处理缓存与同步，对记录及其父记录都适用，无需自己管理。
记录列表（1）：带记录链接的列表
点击 Record Lists 标签，查看 List with Record Links 卡片——账户显示在表格中，账户名是打开账户详情页的超链接（本应用用示例替换了标准账户页，其他 org 中会打开正常账户页）。
LWC 源码要点：用 lightning-datatable 填表，通过 @wire 调用 cacheable Apex 方法；有趣之处是用自定义单元格渲染器在 lightning-datatable 中显示记录链接。
记录列表（2）：带父记录数据的列表
仍在 Record Lists 标签，看第二个卡片 List with Parent Record Data——账户列表有四列：Account Name、Type、Phone、Owner Name，其中 Owner Name 来自父记录（账户所有者）。
LWC 源码用 @wire 调用 cacheable Apex 方法喂表（同前例）。但 lightning-datatable 独立于数据源，数据必须转换成组件期望的格式；示例提供了一个递归转换方法，可处理任意层级的相关记录。
记录列表（3）：分页列表
看 Paginated List 卡片——记录一次显示一页，表格下方有导航控件。
LWC 源码要点：与前例一样用 @wire 调 Apex，但 adapter 只取第一页的前五条记录，直到你导航到第 2 页才取第 6-10 条。之所以包含此例：虽然无限滚动通常是首选体验，但某些场景仍需要显式分页。
混合记录（1）：一键创建两条记录
点击 Mixed Records 标签，看 Create Mixed Records via LDS Functions 卡片——输入 first name、last name 与 opportunity name，一键创建一个 contact 与一个 opportunity。
试用：保持默认值（contact 为 Yan Khang，opportunity 为 Possible deal），点击 Create Contact and Opportunity，应显示两条成功消息。一次点击就创建了两条记录。
混合记录（2）：两次独立的 createRecord 调用
LWC 源码要点：组件对 createRecord LDS 函数做了两次独立调用（一次 contact、一次 opportunity），每次调用在自己的事务中运行，创建的两条记录互不相关。对比 Visualforce 方式——通常要写 Apex 或自定义控制器；这里组件的 JavaScript 配合 Lightning Data Service 就完成了。
下一步（1）：继续探索代码
你已经安装并游览了应用。最好的下一步是继续：检查每个示例背后的代码，对比所看到的每个模式在 Visualforce 与 LWC 两边的实现，把学到的内容改编进你自己的 Lightning Web Components。
下一步（2）：为 VF 开发者打造的模块
强烈推荐 Lightning Web Components for Visualforce Developers 模块——它从 Visualforce 开发者的视角解释 LWC 概念，把你熟悉的 Visualforce 概念映射到 LWC 等价物，并指出开发 Lightning Web Components 与 Visualforce 的根本区别。它也为本应用示例提供了有用上下文，无论先学后学都是很好的伴侣。
文章来源：Trailhead - Quick Start: Explore the Visualforce to LWC Sample App