在开始学习LWC开发之前，先安装开发环境 VS Code
第一步：下载对应版本的Visual Studio Code
选择对应的版本选择下载，然后进入VS Code 安装界面
保持默认设置，一直选择下一步进行即可，安装完成后就能看到VS Code的操作界面
第二步：安装 Salesforce CLI
|
操作系统
|
安装地址
|
|
Mac OS
|
|
|
Windows-32-bits
|
|
|
windows-64-bits
|
|
|
Debian/Ubuntu 64
|
Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
|
|
Debian/Ubuntu x86
|
Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
|
下载好双击安装，跟着默认安装即可
第三步：在VS Code上安装 Salesforce Extension Pack 插件
打开 VS Code，点击 Extensions
在搜索框中输入 Salesforce Extension Pack ，点击 Install 安装
重启电脑后，打开VS Code，快捷键 Ctrl + Shift + P，输入SFDX出现如下界面则安装成功
* 若安装失败或不能出现上述界面，请检查 JDK版本，支持 JDK8 和 JDK 11
* 配置JDK可以参考参考资料4，配置VS Code中的JDK环境参数
MacOS:
{
"salesforcedx-vscode-apex.java.home": "/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home"
}
Windows:
{
"salesforcedx-vscode-apex.java.home": "C:\\Program Files\\AdoptOpenJDK\\jdk-11.0.3.7-hotspot"
}
- In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
- Type SFDX.
- Select SFDX: Create Project.
- Press Enter to accept the standard option.
- Enter HelloWorldLightningWebComponent as the project name.
- Press Enter.
- Select a folder to store the project.
- Click Create Project. You should see something like this as your base setup
Authorize Your Trailhead Playground
- In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
- Type SFDX.
- Select SFDX: Authorize an Org.
- Press Enter to accept the Project Default login URL option.
- Press Enter to accept the default alias.
- Log in using your Trailhead Playground credentials.
- If prompted to allow access, click Allow
After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this
- In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS).
- Type SFDX.
- Select SFDX: Create Lightning Web Component. Don't use SFDX: Create Lightning Component. (This creates an Aura component.)
- Enter helloWorld for the name of the new component.
- Press Enter to accept the default force-app/main/default/lwc.
- Press Enter.
- View the newly created files in Visual Studio Code
helloWorld.html
<template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<p>Hello, {greeting}!</p>
<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
</div>
</lightning-card>
</template>
helloWorld.js
import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {
greeting = 'World';
changeHandler(event) {
this.greeting = event.target.value;
}
}
helloWorld.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
将代码保存到Org中
- Click SFDX: Deploy Source to Org.
- In the Output tab of the integrated terminal, view the results of your deployment. You should have also received a notice that states: SFDX: Deploy Source to Org ... ended with exit code 0. This means that the command ran successfully.
运行效果展示：
参考资料：