Salesforce LWC学习(二) helloWorld程序在VSCode中的实现

上一篇咱们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用，此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范。

作国内项目的同窗直观的感受可能时这两年新项目基本上都在使用lightning，若是进行客制化使用aura框架进行开发。对于新项目来讲，若是受够了classic平台下js,css都在page里面写，而且一个标签或者一个actionFunction各类reRender的杂乱状况下，aura模块的分层管理仍是很易读的；可是对于老项目迁移来讲，若是曾经用bootstrap等前端框架再往aura框架下迁移简直就是痛苦。由于aura框架至关于salesforce推出的一套全新的前端框架，封装的功能以及组建用到了不少自定义的东西，而不是标准的web功能，致使咱们开发人员学习成本以及迁移成本增长。并且因为aura框架进行了自定义的前端框架，因此感受aura框架下lightning运行比较慢。为此，salesforce提供了一个新的前端框架LWC来实现更多的标准化，LWC实现了W3C的WEB标准，加速了lightning的运行以及更大程度的减小框架自身的客制化内容。上篇咱们也说了，LWC开发须要和Salesforce DX一块儿，目前官方推荐 VSCode + Salesforce Extension Pack来开发LWC。本篇主要例举最简单的helloWorld component来对LWC入门，后期会讲更深刻的LWC的知识。

咱们建立Aura的lightning Component会生成一个bundle，里面包含不少类型的文件，当咱们在建立LWC的lightning component也会生成一个bundle，二者生成的类型和数量有区别，对应的mapping关系以下。

咱们在使用aura的时候对待命名规范有要求，可是某些点不是特别严格，针对LWC的官方建议的命名规则以下：

• 必须须要小写字母做为命名开头；
• 必须只能包含字母数字或者下划线；
• 命名空间中必须惟一
• 不能包含空格符
• 不能如下划线结尾
• 不能包含两个连续下划线
• 不能包含破折号

有一点和aura框架差距蛮大的地方是当父component引用子component时，好比子component名字是 sonComponent，父component名字是parentComponent.

针对Aura框架下的引用： <c:sonComponent/>

针对LWC框架下的引用：<c-son-component/>

在LWC中，默认的命名空间和Aura相同，为c。在进行引用时，会按照命名规则的驼峰要求进行拆分，中间使用'-'进行链接各个单词，而且将驼峰中的大写改为小写。在项目命名时，建议使用驼峰方式命名。

 一. Pre Operation

1. Enable Debug Mode：为了后期更好的debug javascript代码，咱们能够设置指定的用户enable，方便后期查问题。

2. 安装CLI，vscode等工具，参看上篇。

 二. 建立helloLwc的LWC Project

1. 建立Project： windows环境 ctrl + shift + p，选择 SFDX: Create Project，而后输入想要建立的名字，这里名称为：helloWorld

2. Authorize Dev Hub: windows环境，ctrl + shift + p 选择 SFDX: Authorize a Dev Hub，后期会跳转到一个Dev Hub Org登录界面，登录便可；

当有下面的内容说明已经受权成功

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

当出现下图说明Scratch Org已经建立好。

 4. 建立LWC Component：选择SFDX: Create Lightning Web Component，按照步骤建立，名称起为helloLwc.

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

helloLwc.html

1 <template>
2     <lightning-card title="HelloWorld" icon-name="custom:custom14">
3         <div class="slds-card__body slds-card__body_inner">
4             Hello, {name}!
5         </div>
6     </lightning-card>
7 </template>

helloLwc.js

1 import { LightningElement,api } from 'lwc'; 2 
3 export default class HelloWorld extends LightningElement { 4     @api name = 'world'; 5 }

helloLwc.js-meta.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
 3     <apiVersion>45.0</apiVersion>
 4     <isExposed>true</isExposed>
 5     <masterLabel>Hello World</masterLabel>
 6     <description>Add a classic greeting to any page.</description>
 7     <targets>
 8         <target>lightning__AppPage</target>
 9     </targets>
10     <targetConfigs>
11         <targetConfig targets="lightning__AppPage">
12             <property name="name" type="String" label="Name" placeholder="World" description="Enter the name of the person to greet."/>
13         </targetConfig>
14       </targetConfigs>
15 </LightningComponentBundle>

其中，helloLwc.html的根component为<template>,作过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

4. 部署lwc component到默认的Scratch Org环境

 5. 效果展现：咱们建立完lightning web component之后须要查看效果是否符合咱们的预期，这里能够有两种方式。

1） 将此lightning web component放在 lightning app builder中,设置name的值查看效果(由于咱们在meta.xml中配置的是容许用在lightning app page中)。

2）在官方提供的play ground环境，将代码放在对应的目录文件下而后运行查看效果。playground 连接：https://developer.salesforce.com/docs/component-library/tools/playground， 这里再也不演示这种方式。

 6. 部署代码到其余的scratch org或者对应的Dev Hub环境： 当咱们已经在scratch org已经测试差很少想要移植到Dev Hub环境或者咱们当前的Dev Hub有多个Scratch Org环境，咱们想要移动到其余的Scratch Org环境，这个时候咱们须要使用CLI命令去实现。从下图可知，咱们如今的默认的scratch org的别名为：test-scratch-org，咱们如今想要将代码push到另一个scratch org。这个时候咱们须要点击Terminal，选择New Terminal之后，使用force:source:deploy命令去push到其余的org。

总结： 学习LwC的阶段碰到了各类各样的问题，感谢学习群里面的一些大神的指点迷津。本篇只是LWC的扫盲操做篇，主要针对像我同样没有用过VS Code以及不知道LWC工程如何建立的小伙伴。篇中有错误的地方欢迎指出，有不懂的小伙伴欢迎互相交流。篇中没有对LWC的语法进行讲解，后面的博客会慢慢详细的讲解。

原文出处：https://www.cnblogs.com/zero-zyq/p/11123871.html