上節(jié)帶您了解了如何創(chuàng)建Lightning Web組件，本節(jié)將為您介紹：在Salesforce開發(fā)過程中，如何將Lightning Web組件部署到組織。

 

下面您將創(chuàng)建在上節(jié)討論的bike組件，并將其部署到組織。由于我們沒有定義任何自己的樣式，所以不需要CSS文件。您需要將這個組件推送到組織中的文件：bikeCard.html、bikeCard.js、bikeCard.js-meta.xml。以下是詳細(xì)步驟。

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

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

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

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

5、您可以在VS Code中的\force-app\main\default\lwc\bikeCard下看到以下內(nèi)容：Lightning Web組件遵循Web標(biāo)準(zhǔn)。HTML標(biāo)準(zhǔn)建議自定義元素名稱包含連字符，但是Salesforce平臺不允許在組件文件夾或文件名中使用連字符。所以我們在這里使用駝峰命名規(guī)則。

6、復(fù)制并替換bikeCard.html、bikeCard.js和bikeCard.js-meta.xml文件的內(nèi)容。

bikeCard.html

bikeCard.js

bikeCard.js-meta.xml

7、保存您的文件。

 

 

組件配置文件

我們還沒有介紹.js-meta.xml的組件配置文件，因為我們一直在LWC.studio中。如果您要開始使用組織中的內(nèi)容，必須包含一個配置文件。ebikes存儲庫組件都有此配置文件。下面是ebikes存儲庫中的一個例子：

1、必填：

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

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

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

 

2、自選：

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

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

有關(guān)支持的語法的完整列表，請前往Salesforce trailhead中參閱文檔。

 

 

在組織中顯示組件

您有兩種方式在用戶界面中顯示Lightning網(wǎng)絡(luò)組件。

1、將組件設(shè)置為支持各種靈活頁面類型（首頁、記錄首頁等），然后使用Lightning App Builder將其添加到靈活頁面中。這是最簡單的方法，也是本單元要遵循的方法。

2、你也可以創(chuàng)建一個標(biāo)簽，指向一個包含Lightning web組件的Aura組件。您可以在存儲庫中看到包裝器組件、制表符、可見性設(shè)置、默認(rèn)應(yīng)用程序配置文件等所需的部件。

 

 

部署文件

現(xiàn)在您需要將組件文件部署到啟用了Dev Hub的組織中。

1、使用SFDX驗證Dev Hub組織：在VS Code的命令面板中授權(quán)一個組織。當(dāng)出現(xiàn)提示時，接受Project Default，并按回車鍵接受默認(rèn)別名。如果系提示允許訪問，點擊Allow。

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

 

 

為組件創(chuàng)建新頁面

由于我們設(shè)置了組件的配置文件，為了組件能夠在Lightning App Builder中使用，需要在用戶界面創(chuàng)建一個應(yīng)用程序，并將組件添加進(jìn)去。

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

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

3、點擊New。

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

5、給它命名為Bike Card，然后單擊Next。

6、選擇One Region，然后點擊Done。

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

現(xiàn)在，您可以將其拖到頁面上。保存并激活頁面，Bike Card組件就會顯示在指定的頁面上。

1、將Bike Card組件拖動到頁面布局的頂部，直到出現(xiàn)自行車。

2、點擊Save。

3、點擊Activate。

4、保持Activate for all users的選擇，還可以選擇更改應(yīng)用程序的名稱或圖標(biāo)。

5、點擊Save。系統(tǒng)會要求您將頁面添加到導(dǎo)航菜單，但您不需要這樣做。您仍然可以在此環(huán)境中訪問您的頁面。

6、點擊Finish。

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

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

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

到此，您就完成了Bike Card組件的創(chuàng)建與部署。在下一單元中，您將構(gòu)建一個具有事件處理功能的交互式組件，并將其部署到您的組織進(jìn)行測試。