Dreamhouse Lightning Web Components 项目教程

Dreamhouse Lightning Web Components 项目教程

dreamhouse-lwcSample application for Lightning Web Components on Salesforce Platform. Part of the sample gallery. Real estate use case. Get inspired and learn best practices.项目地址:https://gitcode.com/gh_mirrors/dr/dreamhouse-lwc

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 项目的配置文件，定义了项目的元数据和部署设置。

启动步骤

1. 克隆项目:

   git clone https://github.com/trailheadapps/dreamhouse-lwc.git
   cd dreamhouse-lwc
   

2. 安装依赖:

   npm install
   

3. 创建 Scratch Org:

   sfdx force:org:create -s -f config/project-scratch-def.json -a dreamhouse
   

4. 部署元数据:

   sfdx force:source:push
   

5. 打开 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 项目。

dreamhouse-lwcSample application for Lightning Web Components on Salesforce Platform. Part of the sample gallery. Real estate use case. Get inspired and learn best practices.项目地址:https://gitcode.com/gh_mirrors/dr/dreamhouse-lwc