SharePoint Online 部署SPFx Web部件

　　前言

　　上一篇文章裏，咱們爲你們介紹瞭如何經過列表模型和SharePoint SPFx模塊去讀取數據，在此基礎上加上樣式，其實就能夠用於項目中了。

　　本文，就爲你們介紹，如何把開發好的SPFx Web部件，打包部署到咱們的SharePoint 環境中。

　　正文

　　1.使用Visual Studio Code打開以下文件夾：

 

　　2.打開文件定義包元數據文件，package-solution.json，以下圖：

 

　　3.在控制檯窗口中，輸入如下命令，打包包含 Web 部件的客戶端解決方案：

　　gulp package-solution

 

　　4.在SharePoint\solution文件夾下，找到打包後的文件，以下圖：

 

　　5.進入App Category，找到Apps for SharePoint，上傳咱們打包的SPFx Web部件；

 

　　6.彈出信任解決方案的確認框，咱們選擇部署，以下圖：

 

　　7.點擊部署解決方案之後，咱們能夠在列表裏查看解決方案的一些基本信息，以下圖：

 

　　8.部署成功之後，咱們還須要在網站中添加解決方案，才能夠使用，以下圖：

 

　　9.添加的過程可能須要3-5分鐘，若是解決方案包比較大，時間會更長一些，以下圖：

 

　　10.添加完成之後，咱們就以在頁面裏選擇咱們的SPFx Web部件了，以下圖：

　　特別要說的是，SPFx Web部件，不單單支持Modern UI，還支持傳統UI

 

　　11.添加完畢之後的效果，以下圖：

 

　　結束語

　　至此，咱們已經學會了，如何將開發好的SharePoint SPFx解決方案，打包並部署到網站中了。