Salesforce LWC（四）：创建与部署

创建一个LWC

1. 在之前面准备好的project中,右键lwc文件夹，选择FDX: Create Lightning Web Component
2. 输入文件名bikeCard
3. 保存位置在lwc文件夹下面
   创建成功后会自动生成三个文件，html文件，js，xml文件（css是默认不主动创建的）
4. 把下面的代码放到相应的文件中

bikeCard.html

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

bikeCard.js

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 }

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

5. 保存文件。

组件配置文件

html，css，js文件相信大家都不陌生，在创建一个新的lwc的时候还会自动生成一个xml文件，这个xml文件就是配置文件，以下面的代码为例，详细介绍一下各个标签的含义。

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

< masterLabel >:在我们设置app builder的时候所显示的名称，如果没有的话就默认是原来的component的名字。
< targets >：这个lwc可以适用在哪些地方，这个地方是非常多的我们可以参照文档看到所有可以使用的地方。
< isExposed >：这个顾名思义，根据标签中的内容判定这个lwc是否暴露出来。
< targetConfigs >：为不同的页面配置一些单独使用的内容
还有很多标签https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags文档中都有详细的描述。

部署LWC

1. Authenticate with your Dev Hub org using SFDX: Authorize an Org from the Command Palette in VS Code. When prompted, accept the Project Default and press Enter to accept the default alias. If prompted to allow access, click Allow.----连接环境
2. Deploy the project files using SFDX: Deploy this Source to Org from the Command Palette in VS Code.-------右键lwc文件夹，选择部署

为组件创建一个新的页面

1. 在setup中找到Lightning App Builder并选择
2. 新建一个页面
3. 选择App Page，后面一路next，页面布局随意选择就好了
4. 在Lightning App Builder中，向下滚动左侧的Lightning组件列表，直到看到Product Card组件。
5. 把组件拖到页面中就可以看到我们的组件了。

至于如何保存激活页面，并将其显示在想要的页面上这就是admin的内容了就不多做介绍。

最后

以上就是狂野书包最近收集整理的关于Salesforce LWC（四）：创建与部署的全部内容，更多相关Salesforce内容请搜索靠谱客的其他文章。