Salesforce系列（二）：使用Visual Studio Code开发第一个SalesForce程序案例！

Salesforce系列（二）：使用Visual Studio Code开发第一个SalesForce程序案例！

---

前言

今天博主将为大家分享:Salesforce系列（二）：使用Visual Studio Code开发第一个SalesForce程序案例！不喜勿喷，如有异议欢迎讨论！

再看这篇文章前博主郑重推荐大家前往阅读我的VsCode安装汉化等系列文章，点这里跳转：VsCode系列（一）：下载安装及汉化 以及 Salesforce系列（一）：使用Visual Studio Code进行开发！

---

创建SalesForce项目

1. 创建Project： windows环境 ctrl + shift + p，选择 SFDX: Create Project，然后输入想要创建的名字，这里名称为：Salesforce，如下图所示：
   

2. Authorize Dev Hub: windows环境，ctrl + shift + p 选择 SFDX: Authorize a Dev Hub，等待片刻会跳转到一个Dev Hub Org登陆界面，按照指示一步步操作，登陆即可；

3. 当有下面的内容说明已经授权成功；授权完以后我们可以创建相关的component，这里我们创建一个apex class，然后名字起名为Test Class。这里我们ctrl + P,输入sfdx:create apex class，输入指定名字，选择默认的路径即可。
   
   创建的文件如下：（在本地更改完以后，可以通过sfdx:deploy操作，便可以将此类部署到DevHub上了）
   

4. 创建默认的Scratch Org环境，选择 Create a Default Scratch Org按照步骤填写创建；

5. 查看这里，当出现下图说明Scratch Org已经创建好；
   

6. 创建LWC Component：选择SFDX: Create Lightning Web Component，按照步骤创建，名称起为salesforce；

7. 当创建好以后，会默认创建好salesforce的bunddle，包括三个文件: salesforce.html/salesforce.js/salesforce.js-meta.xml。为下面的三个文件填充内容；

salesforce.html

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-card__body slds-card__body_inner">
            Hello, {name}!
        </div>
    </lightning-card>
</template>

salesforce.js

import { LightningElement, api } from 'lwc';

export default class HelloWorld extends LightningElement {
    @api name = 'world';
}

salesforce.js-meta.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>
    <masterLabel>Hello World</masterLabel>
    <description>Add a classic greeting to any page.</description>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="name" type="String" label="Name" placeholder="World" description="Enter the name of the person to greet."/>
        </targetConfig>
      </targetConfigs>
</LightningComponentBundle>

其中，helloLwc.html的根component为,做过aura的知道根对应的aura:component，aura中的attribute用来在component中展示内容，在lwc中我们需要在后台声明变量然后html中引用，当然在lwc中包含了3中类型的变量声明: public reactive property / private reactive property 以及 private property。这些区别以及使用会在后续的博客中详细描述，这里有一个概念就好。

针对meta.xml，他是lwc component的配置文件，它可以配置当前的这个lwc component的相关的信息，比如api version, 此component可以引用在哪些，比如lightning__AppPage/lightning__HomePage等。针对meta.xml的配置详情可以参看：https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_configuration_tags

8. 部署lwc component到默认的Scratch Org环境。
   
9. 效果展示：我们创建完lightning web component以后需要查看效果是否符合我们的预期，这里可以有两种方式；

---

到这里:Salesforce系列（二）：使用Visual Studio Code开发第一个SalesForce程序案例！分享完毕了，快去试试吧！

---

最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

---