DEX475

课程介绍

各位同学，咱们来看这一页幻灯片，它讲的是怎么在实时浏览器预览里开发 Lightning Web 组件，也就是我们常说的 LWC。 简单来说，就是你一边写代码，一边就能在浏览器里看到组件的样子，而且这个预览是“活”的——每当你保存源代码，预览画面就会自动更新，不用你手动去部署代码，也不用你一次次点击浏览器刷新。这样带来的好处是，你可以非常快地迭代调整，就像快速地把旧组件“卸下来”、新组件“装上去”一样，几秒钟就能看到改动效果，开发效率会高很多。 这一章会把实时预览会用到的各种工具都介绍到，还会讲到怎么在移动端的场景下做开发设置，以及如何配合你自己熟悉的部署工具来工作。最后，还会总结一些 LWC 开发的最佳实践，帮大家养成好的开发习惯。 总之，学会用实时预览，你就能在更接近“所见即所得”的环境里写组件，把精力都集中在解决业务问题上，而不是耗费在等待部署和刷新的琐事上。好，这一页的内容就是这样。

课程章节

本课程共有 6 个章节

• 1

  Live Preview — Overview & Setup

  第 20 页

  同学们，我们今天来看看 LWC 开发中一个特别方便的功能——实时预览。 简单说，它就是：你只要在编辑器里保存代码，浏览器就会自动刷新，让你立刻看到效果，省去了手动刷新的麻烦。这个功能以前叫 Local Dev，在 Spring '26 版本里正式改名为 Live Preview，所以你可能会在旧资料里见到老名字，它们其实是一回事。 它给我们提供了四种预览工具： - 第一种是 Lightning App 预览，你可以用 `sf lightning dev app` 命令启动，用来预览整个 Lightning 应用程序，甚至还能模拟手机上的显示效果； - 第二种是体验站点预览，用 `sf lightning dev site` 命令，专门针对 LWR 站点，也就是体验云的站点； - 第三种是单组件预览，用 `sf lightning dev component` 命令，它可以单独测试一个组件，不依赖整个应用，非常适合做隔离调试； - 第四种是 VS Code 扩展，可以直接在你写代码的编辑器里内嵌预览，不用来回切换窗口。 安装和开启也很简单：首先你要确保安装了 Salesforce CLI，然后直接运行任意一个 Live Preview 命令，比如 `sf lightning dev app`，系统会弹出一个提示问你是否启用这个功能，你只要确认一下就行。 最后注意一点：这个功能虽然在所有组织类型里都能用，但强烈建议只在沙箱或者临时的开发组织里使用，避免误操作影响到正式的生产环境。 好了，有了实时预览，咱们开发组件就能边写边看，反馈立马到位，效率自然就上去了。

  ▶ 播放视频 查看详情
• 2

  Lightning App & Experience Sites Live Preview

  第 21 页

  各位同学，我们来看一下 Lightning App 的实时预览功能。这个工具可以让你在开发的时候，同时看到桌面和移动设备上的效果，非常方便。 如果你想在移动端预览，就需要用到模拟器。先说 iOS，这个只能在 Mac 上操作。你需要先安装 Xcode，然后在 Xcode 里把 iPhone 模拟器下载下来。至于 Android 模拟器，不管你是用 Mac 还是 Windows，都要安装 Android Studio，在里面配好安卓虚拟设备。当你用 CLI 启动实时预览时，它会很贴心地自动提示你，要不要在模拟器上安装 Salesforce 移动应用，你跟着提示走就行，很快就能在模拟器里看到真实的移动界面了。 再来说说体验网站的实时预览。它基于你发布的 LWR 网站，直接生成一份静态捆绑包来展示预览。如果你在体验生成器里做了修改，想立刻看到最新效果，记得在命令后面加上 --get-latest 来刷新缓存。还有一点要特别提醒大家，从 26 年春季版本开始，那个 --ssr 标志已经不再支持了，后面再用它就无效了，千万别写错了。 最后一个小建议：每次跑实时预览命令之前，一定先执行一下 sf update，确保你的 CLI 是最新版本，免得版本不匹配出问题。好了，关于 Live Preview 的重点就是这些，大家自己动手试试吧！

  ▶ 播放视频 查看详情
• 3

  Single Component & VS Code Live Preview

  第 22 页

  同学们，我们来看这一页，要讲的是，单组件实时预览，这个功能。可能你们在开发Lightning Web Components的时候，经常会遇到一个问题：想把一个组件单独拿出来看看效果，但又不想每次都部署到整个Salesforce环境里。这个单组件预览，就是来解决这个痛点的。 它会打开一个独立的浏览器窗口，专门预览你这一个LWC组件。而且它不是一个简单的静态展示，它可以直接连接到Salesforce的平台服务。也就是说，你在组件里用到的，Lightning Data Service，、，@salesforce模块导入，，还有，Apex控制器，，在预览里全都能正常工作，跟在实际的Salesforce页面里一样。这就非常好，因为我们可以在开发阶段就提前发现问题。 在这个预览窗口上，还会有一个很实用的工具栏。里面提供了，设备维度的预设，，比如模拟手机、平板的尺寸，点一下就能看到组件在不同设备上的样子。你也可以用，自定义预设，，输入自己想要的宽度高度。还有一个，性能模式，，打开后会隐藏掉工具栏和多余的界面，给你一个干干净净的预览，方便截图或者做演示。另外，工具栏上有个，项目组件侧边栏，，它会列出你当前项目里所有可用的组件，你可以快速切换预览，不用来回翻文件。 那么怎么启动这个预览呢？VS Code扩展给我们提供了三种方式。第一种，在文件编辑区域直接，右键菜单，里能找到启动选项；第二种，用，命令调色板，，输入相应的命令；第三种，通过，Agentforce Vibes，集成来触发。这三种方式随你喜欢，怎么方便怎么来。 还有一个要提的是，这个扩展目前还，支持测试版的React组件预览，，如果你也在用React开发，也是可以受益的。 最后，实时预览跟，Agentforce Vibes，配合得也很好。你在用AI辅助写代码的时候，可以一边让Vibes帮你生成或修改代码，一边立即启动预览查看结果，形成一个即时的反馈循环，大大提升写UI的效率。 好，关于单组件实时预览，我们就讲这些。大家可以在自己的VS Code里试着体验一下。

  ▶ 播放视频 查看详情
• 4

  Live Preview — Considerations & Limitations

  第 23 页

  好，同学们，这节课我们聊聊一个在日常开发中特别实用的功能——Live Preview。 你可以把它想象成一个实时反馈的工具，帮你在开发Lightning Web Components时快速看到改动效果，而不用每次都手动部署，节省大量时间。 那它到底能自动加载哪些修改呢？简单来说，如果你只是改了最基础的HTML或者CSS，比如调个颜色、改个排版，它会自动刷新。如果你添加了一个新的组件引用，或者修改了不改变公共API的JavaScript内部逻辑，它也能自动更新。还有，从25年春季版本开始，如果你在项目里新增或删除了文件，它也能自动检测到，非常聪明。 但是，有些改动就需要你手动刷新了。比如你给组件新增了一个对外的@api属性——因为这影响组件的公共接口，Live Preview不会自动加载。涉及电线适配器（wire adapter）的变动、新添加的@salesforce导入，或者对.js-meta.xml元数据文件做了修改，这些也需要你自己点一下刷新按钮，让预览更新。 再来看预览的方式。如果你是看整个应用程序或者网站的预览，那需要先部署你的改动，然后重启本地服务器，才会生效。而如果你只是预览单个组件，那就简单多了，直接在浏览器里刷新一下页面就可以。 还有几点需要知道。Live Preview目前只支持Lightning Web Components，不支持老的Aura组件。从25年春季之后，构建出来的东西也不会再存到静态资源里了，文件增删会自动检测，不用你额外操作。但要注意，如果你要预览的是一个着陆页面，这个功能是做不到的。 那这个功能在工作流里真的帮了大忙，记住它能自动加载什么、什么需要手动刷新，开发起来会顺手很多。有什么问题随时问，我们接着往下。

  ▶ 播放视频 查看详情
• 5

  Mobile Development & Custom Deployment

  第 24 页

  好，我们来聊聊今天这个Slide里讲到的移动开发和部署Lightning Web Components的一些替代方法。 首先，Slide提到，如果你想在移动设备上预览组件，可以使用Salesforce CLI的一个插件，叫Mobile Fields。它能让你在虚拟的移动设备上看看组件会是什么样子。同时，官方有一本《移动和离线开发人员指南》，是很好的伴侣文档，做移动端或者需要离线功能的同学一定要去参考。 接下来是重点——如果你没有使用Salesforce DX这套工具，该怎么把Lightning Web Components部署到环境里呢？Slide告诉我们，可以用传统的元数据API方式。具体怎么做呢？你需要创建一个压缩的存档，里面包含组件文件和package.xml清单文件，使用的元数据类型叫LightningComponentBundle。然后，你可以借助像ANT Migration Tool这样的工具，或者自己写脚本来调用元数据API部署这个包。 但是要注意，不用Salesforce CLI的话，你也会失去它自带的更改追踪能力，所以你需要自己想办法来管理源代码的变化，比如用GitHub来监控代码变更。另外，如果数据有变化，还可以考虑使用沙箱审计功能来跟踪。 所以总结一下，Slide是要告诉我们：移动预览可以用CLI插件，离线开发要查专门的指南；如果你没上Salesforce DX，也能用元数据API打包部署，但需要自己处理版本控制和变更跟踪的问题。这些点，在实际项目里挺实用的，大家根据自己团队的DevOps流程来选择就好。

  ▶ 播放视频 查看详情
• 6

  Best Practices & Learning Resources

  第 25 页

  同学们，这一页我们来看看，要学好 Lightning Web Components，除了官方文档，Salesforce 还给我们准备了哪些顺手的学习材料。 其实，Salesforce 通过博客、视频和 Trailhead 提供了很多最佳实践。比如有专门讲 LWC 性能优化的博客，还有一个“提高 LWC 技能”系列，以及教你怎么做好错误处理的视频。这些内容就像老师平时的经验分享，非常实用。 还有一个特别值得推荐的地方，就是 GitHub 上的 LWC Recipes 仓库。它就像一个练习册，把常见的技术点都变成了一个个小例子，比如组件合成、状态管理、事件处理、数据访问和导航，看代码就能明白怎么用。 如果你想跟着路线系统地学，有两条 Trailhead 路线很适合你：一条是“构建 Lightning Web Components”，带你从头开始搭建；另一条是“卸载 Lightning Web Components”，主要跟你讲性能优化、按需加载这些技巧，帮你把组件做得更轻快。 最后，想要看完整项目的样子，可以下载那个 E-Bikes 示例应用。它是一个用 LWC 搭建的完整案例，集成了 Salesforce Experiences，里面有产品管理和订单处理，跑一遍下来，你大概就知道真实项目里 LWC 是怎么组合在一起的了。 总之，这些资源都是官方精心维护的，你多摸索、多动手敲一敲，很快就能上手。好了，这一页的内容我们先说到这儿。

  ▶ 播放视频 查看详情