今年在做lightning项目的时候，突然component-library默认是lwc的标签，于是好奇的开始lwc的学习之路，以此来做笔记。
可以在这边学习哦：https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
1.下载安装Command Line Interface (CLI)
| Operating System | Link to Installer |
|---|---|
| macOS | https://sfdc.co/sfdx_cli_osx |
| Windows 32-bit | https://sfdc.co/sfdx_cli_win |
| Windows 64-bit | https://sfdc.co/sfdx_cli_win64 |
| Debian/Ubuntu 64 |
https://sfdc.co/sfdx_cli_linux Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. |
| Debian/Ubuntu x86 |
https://sfdc.co/sfdx_cli_linux_x86 Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. |
2.安装Visual Studio Code
https://code.visualstudio.com/
3.创建项目
在软件快捷键Ctrl+shift+P,打开搜索器：
输入：SFDX
选择：SFDX: Create Project.
然后输入项目名称，回车确定
选择文件夹本地保存
点击Create Project
然后继续Ctrl+shift+P,打开搜索器：
输入SFDX: Authorize an Org
然后输入项目默认登陆URL，登陆确认
继续打开搜索器：输入SFDX: Create Lightning Web Component.
回车选择默认force-app/main/default/lwc.
输入component名称,回车确认，项目创建成功！
如图：
右键项目选择SFDX: Deploy Source to Org 上传到org服务器
之后可以在app builder中拖出lwc放到页面上如图：
4 部分代码解析：
// import module elements
import { LightningElement, track } from 'lwc';
// declare class to expose the component
export default class App extends LightningElement {
// add decorator
@track
ready = false;
// use lifecycle hook
connectedCallback() {
setTimeout(() => {
this.ready = true;
}, 3000);
}
}
- @api: Marks a property as public for use in your template or other components.
- @track: Marks a property for internal monitoring. A template or function using this property forces a component to rerender when the property’s value changes. Use this to store values locally, especially as a user interacts with your component.
- @wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org.
一个属性只能选择@api或@track其中一个，不能两者都有。
5.关于.js-meta.xml文件
举例代码：
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>false</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Product__c</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
apiVersion :必填，绑定Salesforce API 版本。
isExposed (true or false) : 使component能够在其他namespace使用，仅将此设置为true以使组件可在托管包（managed package）中使用，或者由另一组织中的Lightning App Builder使用。
targets：指定可以在Lightning App Builder中添加组件的Lightning页面类型。
targetConfigs：允许您指定特定于每种类型的Lightning页面的行为，包括哪些对象支持该组件
6.push code 到 org
请参考github，很详细：https://github.com/trailheadapps/ebikes-lwc#installing-e-bikes-using-salesforce-dx
7.deploy 文件（前提需要在org的setup中将Dev Hub enable）
1.首先验证登陆的org:
sfdx force:auth:web:login -d -a myhuborg
2.使用用户名从ebikes-lwc目录部署项目文件，以登录Dev Hub org（而不是临时org(
sfdx force:org:create -s -f config/project-scratch-def.json -a ebikes这一段表示临时org，类似于lightning中的.app)）[tips:username的<>注意去掉哦]
sfdx force:source:deploy -p force-app -u <username>
3.在org中设置权限。
sfdx force:user:permset:assign -n ebikes -u <username>