注册 Dev Org

首先需要有一个启用了支持 Lightning Web Component 的 Org。

如果出于学习的目的，使用 Trailhead Playground 也可以。

由于 Trailhead Playground 是自动生成的，所以需要到 Setup->User 界面下重设用户密码。

下载 Salesforce CLI

在网站上下载安装 CLI 的包，这是从开发环境到 Salesforce 通讯的命令行工具。

建立 DX 项目

使用命令行建立项目：

sfdx force:project:create --projectname <项目名称>

登陆 Salesforce 的 Org

我们可以使用多种方式登陆 Org，这里直接通过 Org 的 ID 来登陆（从 Setup->Company Information 部分可以得到 ID）：

sfdx force:auth:web:login -a <Org 的 ID>

建立 LWC

将 LWC 建立在项目的 force-app/main/default/lwc 文件夹中：

sfdx force:lightning:component:create --type lwc -n <LWC 的 API 名字> -d force-app/main/default/lwc

部署 LWC

sfdx force:source:deploy -p force-app -u <Salesforce Org 的用户名>

将 LWC 放到页面中

默认情况下，LWC 在 Org 中是“隐藏”的，没法直接拖拽到页面中。

要想把 LWC 放到页面中，首先找到扩展名是 “.js-meta.xml” 的文件，修改代码。

需要修改的行：

<isExposed>false</isExposed>

修改为：

<isExposed>true</isExposed>
<targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>

这样，就将 LWC 设置为可以在任何 Lightning 页面中使用了，上面的例子包括了3个 Lightning Page 的类型。还可以加入到社区页面中。

再次部署。

在 Salesforce 中，我们可以在 Lightning 的页面编辑部分看到 LWC，从而可以拖动放到页面中。