Dreamhouse Lightning Web Components 项目教程
1. 项目的目录结构及介绍
dreamhouse-lwc/
├── README.md
├── LICENSE
├── sfdx-project.json
├── force-app/
│ └── main/
│ └── default/
│ ├── aura/
│ ├── classes/
│ ├── components/
│ ├── contentassets/
│ ├── flexipages/
│ ├── layouts/
│ ├── lwc/
│ ├── objects/
│ ├── permissionsets/
│ ├── staticresources/
│ ├── tabs/
│ └── triggers/
├── scripts/
│ ├── deploy.sh
│ └── retrieve.sh
├── config/
│ ├── project-scratch-def.json
│ └── jest.config.js
└── package.json
目录结构介绍
- README.md: 项目说明文件,包含项目的概述、安装步骤等信息。
- LICENSE: 项目的开源许可证文件。
- sfdx-project.json: Salesforce DX 项目配置文件,定义了项目的元数据和部署设置。
- force-app/: 包含项目的所有 Salesforce 元数据文件。
- main/default/: 主要元数据目录,包含 Aura 组件、Lightning Web Components (LWC)、Apex 类、静态资源等。
- scripts/: 包含用于部署和检索元数据的脚本。
- config/: 包含项目的配置文件,如 Scratch Org 定义文件和 Jest 测试配置文件。
- package.json: Node.js 项目的配置文件,定义了项目的依赖和脚本。
2. 项目的启动文件介绍
启动文件
- README.md: 项目的启动文件,提供了项目的概述、安装步骤和使用说明。
- sfdx-project.json: Salesforce DX 项目的配置文件,定义了项目的元数据和部署设置。
启动步骤
-
克隆项目:
git clone https://github.com/trailheadapps/dreamhouse-lwc.git cd dreamhouse-lwc
-
安装依赖:
npm install
-
创建 Scratch Org:
sfdx force:org:create -s -f config/project-scratch-def.json -a dreamhouse
-
部署元数据:
sfdx force:source:push
-
打开 Scratch Org:
sfdx force:org:open
3. 项目的配置文件介绍
sfdx-project.json
{
"packageDirectories": [
{
"path": "force-app",
"default": true
}
],
"namespace": "",
"sfdcLoginUrl": "https://login.salesforce.com",
"sourceApiVersion": "52.0"
}
- packageDirectories: 定义了包含 Salesforce 元数据的目录。
- namespace: 项目的命名空间,当前为空。
- sfdcLoginUrl: Salesforce 登录 URL。
- sourceApiVersion: Salesforce API 版本。
project-scratch-def.json
{
"orgName": "Dreamhouse",
"edition": "Developer",
"features": []
}
- orgName: Scratch Org 的名称。
- edition: Scratch Org 的版本,这里是 Developer 版本。
- features: 定义了 Scratch Org 的特性,当前为空。
jest.config.js
module.exports = {
preset: "@salesforce/lwc-jest",
moduleNameMapper: {
"^lightning/(.+)$": "@salesforce/lwc-jest/src/lightning-stubs/$1"
}
};
- preset: 使用 Salesforce 的 LWC Jest 预设。
- moduleNameMapper: 映射 Lightning 模块的路径。
通过以上配置文件,可以轻松地管理和部署 Dreamhouse Lightning Web Components 项目。