上節帶您了解了如何創建Lightning Web組件，本節將為您介紹：在Salesforce開發過程中，如何將Lightning Web組件部署到組織。

 

下(xia)(xia)面您將創建在上(shang)節(jie)討論的bike組(zu)件，并(bing)將其(qi)部署到組(zu)織(zhi)。由于我們沒有定(ding)義任何自己的樣式，所以不需(xu)要CSS文(wen)件。您需(xu)要將這(zhe)個組(zu)件推送到組(zu)織(zhi)中的文(wen)件：bikeCard.html、bikeCard.js、bikeCard.js-meta.xml。以下(xia)(xia)是詳細步驟。

1、繼續在bikeCard項目(mu)中。

2、在force-app/main/default下，右擊點擊lwc文件夾(jia)，選擇SFDX: Create Lightning Web Component，創建bikeCard組件文件。

3、輸入bikeCard作為新組(zu)件的名稱。

4、連按兩次回(hui)車鍵，接受默(mo)認的(de)force-app/main/default/lwc

5、您可以在VS Code中(zhong)(zhong)的\force-app\main\default\lwc\bikeCard下(xia)(xia)看到以下(xia)(xia)內容：Lightning Web組件遵(zun)循(xun)Web標準。HTML標準建議(yi)自定義元素名稱包含(han)連字符，但是Salesforce平臺(tai)不(bu)允許(xu)在組件文件夾或文件名中(zhong)(zhong)使(shi)用(yong)連字符。所以我們在這里使(shi)用(yong)駝峰命(ming)名規則。

6、復制(zhi)并替換bikeCard.html、bikeCard.js和bikeCard.js-meta.xml文件的內容。

bikeCard.html

bikeCard.js

bikeCard.js-meta.xml

7、保存您的(de)文件。

 

 

組件配(pei)置文件

我們還沒有(you)(you)介紹(shao).js-meta.xml的(de)組(zu)件配(pei)置(zhi)文件，因為我們一直在LWC.studio中(zhong)。如果您要(yao)開始使(shi)用(yong)組(zu)織(zhi)中(zhong)的(de)內容，必須包含一個(ge)配(pei)置(zhi)文件。ebikes存儲(chu)(chu)庫組(zu)件都有(you)(you)此(ci)配(pei)置(zhi)文件。下面(mian)是ebikes存儲(chu)(chu)庫中(zhong)的(de)一個(ge)例子：

1、必填(tian)：

•  apiVersion將組件與Salesforce的API版本綁定。

•  isExposed（true或false） 如果isExposed為false，該組件不會暴露在Lightning App Builder或Experience Builder中。

•  要想讓該組件在Lightning App Builder或Experience Builder中使用，需要將isExposed設置為true，并至少定義一個<target>，即Lightning頁面的類型。

 

2、自選(xuan)：

•  targets指定該組件可以在Lightning App Builder中添加哪些類型的Lightning頁面。

•  targetConfigs允許您指定每種類型的Lightning頁面的具體行為，比如哪些對象支持該組件。

有關支持的(de)語法的(de)完(wan)整列(lie)表，請前往Salesforce trailhead中參閱(yue)文檔。

 

 

在組織中顯示組件(jian)

您有(you)兩種方(fang)式在用(yong)戶界面中顯示Lightning網絡組件(jian)。

1、將組件設置(zhi)為(wei)支(zhi)持(chi)各種靈活(huo)頁(ye)面(mian)類型(xing)（首頁(ye)、記(ji)錄首頁(ye)等(deng)），然后使用Lightning App Builder將其添加到靈活(huo)頁(ye)面(mian)中。這是最簡單的(de)方法(fa)，也是本單元(yuan)要遵循的(de)方法(fa)。

2、你(ni)也可(ke)以創建一個標簽，指向一個包含(han)Lightning web組件(jian)的Aura組件(jian)。您可(ke)以在存(cun)儲(chu)庫中看到包裝器(qi)組件(jian)、制(zhi)表符、可(ke)見性(xing)設置(zhi)、默認(ren)應(ying)用程(cheng)序配置(zhi)文(wen)件(jian)等所需的部件(jian)。

 

 

部署文件

現在您需要將組(zu)件文件部(bu)署到啟用了(le)Dev Hub的組(zu)織中。

1、使用SFDX驗證Dev Hub組(zu)(zu)織：在(zai)VS Code的命令(ling)面板中授(shou)權(quan)一個(ge)組(zu)(zu)織。當出現提(ti)示時，接受(shou)Project Default，并按回車鍵(jian)接受(shou)默認別(bie)名(ming)。如果(guo)系提(ti)示允許訪問(wen)，點(dian)擊Allow。

2、右擊點擊force-app/main/default文件(jian)夾，選(xuan)擇SFDX: Deploy this Source to Org。

 

 

為組件創(chuang)建新頁(ye)面

由于我(wo)們設置了(le)組件的(de)配置文(wen)件，為了(le)組件能夠在Lightning App Builder中使用(yong)，需要在用(yong)戶界面(mian)創(chuang)建一個應用(yong)程序，并將組件添加進去(qu)。

1、若要打開(kai)組織，請(qing)使用SFDX: Open Default Org，從VS Code的命(ming)令面板打開(kai)默認組織。

2、在Setup中，輸入Lightning App Builder，然后在快速(su)查找(zhao)框中找(zhao)到Lightning App Builder。

3、點(dian)擊New。

4、選(xuan)擇App Page，然后點擊Next。

5、給(gei)它命名(ming)為(wei)Bike Card，然后單擊Next。

6、選(xuan)擇(ze)One Region，然后(hou)點擊Done。

7、在Lightning App Builder中，向(xiang)下(xia)滾動組(zu)件(jian)(jian)列表，直到看到您的Bike Card組(zu)件(jian)(jian)。

現在(zai)，您(nin)可(ke)以將(jiang)其拖(tuo)到頁面(mian)上。保存并激活頁面(mian)，Bike Card組件就會(hui)顯示在(zai)指(zhi)定的頁面(mian)上。

1、將(jiang)Bike Card組件拖動到頁面布局的頂(ding)部，直到出(chu)現自行(xing)車(che)。

2、點(dian)擊Save。

3、點擊Activate。

4、保(bao)持(chi)Activate for all users的(de)選擇，還可以(yi)選擇更改(gai)應用(yong)程序的(de)名稱或圖標(biao)。

5、點(dian)擊(ji)Save。系統會(hui)要求您(nin)(nin)將頁面(mian)(mian)添加(jia)到導航菜單，但您(nin)(nin)不需要這(zhe)樣做。您(nin)(nin)仍然可以在此環境中訪問您(nin)(nin)的頁面(mian)(mian)。

6、點擊(ji)Finish。

7、點擊左上角的Back，退出(chu) Lightning App Builder.。

8、從App Launcher中，找到并選擇(ze)Bike Card。

9、打開它，可以看到(dao)組(zu)件在用戶界面中工作。

到此(ci)，您(nin)就完成了Bike Card組(zu)(zu)件的(de)創建(jian)與部(bu)署(shu)。在(zai)下一單元(yuan)中，您(nin)將(jiang)構建(jian)一個具有事件處理(li)功(gong)能(neng)的(de)交(jiao)互式(shi)組(zu)(zu)件，并將(jiang)其部(bu)署(shu)到您(nin)的(de)組(zu)(zu)織進行測(ce)試(shi)。