Lightning Web 组件的易于理解的代码示例集合。每个菜谱都演示了如何在遵循最佳实践的同时,用尽可能少的代码行编写特定任务。 “查看源代码”链接可直接转至 GitHub 上的代码。从“Hello World”到数据访问和第三方库,总有一个秘诀!
通过完成快速入门:探索 LWC 食谱示例应用程序 Trailhead 项目或观看此简短的演示视频,了解有关此应用程序的更多信息。
此示例应用程序设计为在 Salesforce Platform 上运行。如果您想在任何平台上体验 Lightning Web Components,请访问 https://lwc.dev,并尝试我们的 Lightning Web Components 示例应用程序 LWC Recipes OSS。
使用 Scratch Org 安装应用程序:这是推荐的安装选项。如果您是想要体验应用程序和代码的开发人员,请使用此选项。
使用解锁包安装应用程序:此选项允许任何人在不安装本地开发环境的情况下体验示例应用程序。
使用 Developer Edition Org 或 Trailhead Playground 安装应用程序:在处理 Trailhead Badges 或希望将应用程序部署到比 Scratch 组织更永久的环境时非常有用。
可选安装说明
代码之旅
设置您的环境。按照快速入门:Lightning Web Components Trailhead 项目中的步骤进行操作。步骤包括:
在 Trailhead Playground 中启用开发中心
安装 Salesforce CLI
安装 Visual Studio 代码
安装 Visual Studio Code Salesforce 扩展,包括 Lightning Web Components 扩展
如果您尚未这样做,请授权您的 hub 组织并为其提供别名(以下命令中的myhuborg ):
sf org login web -d -a myhuborg
克隆 lwc-recipes 存储库:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
创建一个临时组织并为其提供一个别名(以下命令中的lwc-recipes ):
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
将应用程序推送到您的临时组织:
sf project deploy start
将食谱权限集分配给默认用户:
sf org assign permset -n recipes
导入样本数据:
sf data tree import -p ./data/data-plan.json
打开临时组织:
sf org open
在“设置”中的“主题和品牌”下,激活“Recipes Lite”或“Recipes Blue”主题。
在应用程序启动器中,单击查看全部,然后选择LWC应用程序。
如果您想要将应用程序部署到比 Scratch 组织更永久的环境,或者您不想安装本地开发工具,请按照这组说明进行操作。您可以使用非源跟踪组织,例如免费的 Developer Edition Org 或 Trailhead Playground。
确保从全新的环境开始,以避免与您之前所做的任何工作发生冲突。
登录到您的组织
单击此链接可在您的组织中安装 Recipes 解锁包。
选择为所有用户安装
导入帐户和联系人数据:
单击此处访问Accounts-Contacts.csv文件。右键单击浏览器窗口并将文件另存为Accounts-Contacts.csv 。
在“设置”中,在“快速查找”框中键入“数据导入” ,然后单击“数据导入向导” 。
单击启动向导。
单击“帐户和联系人” ,然后单击“添加新记录” 。
将刚刚保存的Accounts-Contacts.csv文件拖至上传区域。
单击“下一步” 、 “下一步”和“开始导入” 。
如果您尝试在 Trailhead 上快速启动,则需要执行此步骤,否则请跳过:
转至设置 > 用户 > 权限集。
单击食谱。
单击“管理分配” 。
检查您的用户并单击“添加分配” 。
在“设置”中的“主题和品牌”下,激活“Recipes Lite”或“Recipes Blue”主题。
在应用程序启动器中,单击查看全部,然后选择LWC Recipes应用程序。
如果您想将应用程序部署到比 Scratch 组织更永久的环境,请按照这组说明进行操作。这包括非源跟踪组织,例如免费的 Developer Edition Org 或 Trailhead Playground。
确保从全新的环境开始,以避免与您之前所做的工作发生冲突。
克隆此存储库:
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
授权您的 Trailhead Playground 或 Developer 组织并为其提供别名(以下命令中的mydevorg ):
sf org login web -s -a mydevorg
在终端中运行此命令以部署应用程序。
sf project deploy start -d force-app
将recipes
权限集分配给默认用户。
sf org assign permset -n recipes
导入一些示例数据。
sf data tree import -p ./data/data-plan.json
如果您的组织尚未开放,请立即打开:
sf org open -o mydevorg
在“设置”中的“主题和品牌”下,激活“Recipes Lite”或“Recipes Blue”主题。
在应用程序启动器中,选择LWC应用程序。
如果您想要将现代 Web 开发工具集成到 Salesforce 开发流程或持续集成/持续部署流程中,此存储库包含多个相关文件。
Prettier 是一个代码格式化程序,用于确保整个代码库的格式一致。要将 Prettier 与 Visual Studio Code 结合使用,请从 Visual Studio Code Marketplace 安装此扩展。 .prettierignore 和 .prettierrc 文件作为此存储库的一部分提供,用于控制 Prettier 格式化程序的行为。
警告当前的 Apex Prettier 插件版本要求您安装 Java 11 或更高版本。
ESLint 是一种流行的 JavaScript linting 工具,用于识别风格错误和错误结构。要将 ESLint 与 Visual Studio Code 结合使用,请从 Visual Studio Code Marketplace 安装此扩展。 .eslintignore 文件作为此存储库的一部分提供,用于在 Lightning Web 组件开发的上下文中从 linting 过程中排除特定文件。
该存储库还附带了一个 package.json 文件,可以轻松设置预提交挂钩,该挂钩通过在每次git commit
更改时运行 Prettier 和 ESLint 来强制执行代码格式化和 linting。
要设置格式化和 linting 预提交挂钩:
如果您尚未安装 Node.js,请安装它
在项目的根文件夹中运行npm install
以安装 ESLint 和 Prettier 模块(注意:Mac 用户应在运行此命令之前验证是否已安装 Xcode 命令行工具。)
Prettier 和 ESLint 现在将在您每次提交更改时自动运行。如果检测到 linting 错误,提交将会失败。您还可以使用以下命令从命令行运行格式化和 linting(查看 package.json 以获取完整列表):
npm run lint npm run prettier
代码导览是引导式演练,可帮助您更好地理解应用程序代码。为了能够运行它们,请安装 CodeTour VSCode 扩展。