Iceworks 可視化搭建

可視化搭建

在 Iceworks 中，支持通過(guò)可視化的方式創(chuàng)建頁(yè)面，搭建和創(chuàng)建組件。

通過(guò)區(qū)塊組裝頁(yè)面

通過(guò)可視化操作，以區(qū)塊拼裝的方式快速生成頁(yè)面。

激活

激活主要有兩種方式：

• 點(diǎn)擊 VS Code 編輯器左側(cè)的活動(dòng)欄中的 Iceworks 圖標(biāo)，并在快速入口視圖中點(diǎn)擊使用區(qū)塊組裝頁(yè)面
• 通過(guò) ??P 或 Ctrl+Shift+P 快捷鍵喚醒命令面板。在命令面板中輸入 Iceworks: Generate Page By Blocks，并按下回車(chē)以激活插件

使用

1. 輸入頁(yè)面名稱(chēng)；
2. 從右側(cè)的區(qū)塊列表中選擇頁(yè)面需要使用的區(qū)塊，點(diǎn)擊添加到左側(cè)頁(yè)面預(yù)覽區(qū)；
3. 在左側(cè)頁(yè)面預(yù)覽區(qū)可通過(guò)拖拽排序區(qū)塊的順序，或點(diǎn)擊右上角的刪除圖標(biāo)移除區(qū)塊；
4. 點(diǎn)擊“生成頁(yè)面”按鈕，生成頁(yè)面代碼，頁(yè)面代碼默認(rèn)將生成到 src/pages/ 目錄下。

添加物料至源碼

通過(guò)可視化的方式一鍵添加區(qū)塊或組件到源碼中。

激活

主要有三種方式：

• 點(diǎn)擊 VS Code 編輯器左側(cè)的活動(dòng)欄中的 Iceworks 圖標(biāo)，并在快速入口視圖中點(diǎn)擊打開(kāi)添加組件面板
• 在需要添加的物料的源碼位置中點(diǎn)擊右鍵，選擇 Iceworks: 添加組件
• 通過(guò) ??P 或 Ctrl+Shift+P 快捷鍵喚醒命令面板。在命令面板中輸入 Iceworks: Import Material，并按下回車(chē)以激活插件

使用

1. 選擇需要插入物料的代碼位置
2. 搜索組件，點(diǎn)擊需要使用的組件，物料代碼將自動(dòng)添加到相應(yīng)的位置中

下載物料到本地

通過(guò)下載區(qū)塊物料快速創(chuàng)建組件。

激活

主要有兩種方式：

• 點(diǎn)擊 VS Code 編輯器左側(cè)的活動(dòng)欄中的 Iceworks 圖標(biāo)，并在組件列表視圖中點(diǎn)擊+圖標(biāo)，并選擇下載區(qū)塊物料到本地
• 通過(guò) ??P 或 Ctrl+Shift+P 快捷鍵喚起命令面板。輸入 Iceworks: Download Component Materials，并按下回車(chē)以激活插件

使用

1. 填寫(xiě)組件名；
2. 組件名輸入框下方選擇一個(gè)使用的區(qū)塊；
3. 點(diǎn)擊 創(chuàng)建組件 按鈕，生成組件代碼，組件代碼默認(rèn)將生成到 src/components/ 目錄下

可視化搭建組件

通過(guò)可視化搭建的方式生成組件代碼。

激活

通過(guò) ??P 或 Ctrl+Shift+P 快捷鍵喚起命令面板，輸入 Iceworks: Design Component，并按下回車(chē)以激活插件

使用

1. 拖拽左側(cè)的組件到中間的畫(huà)布面板中；
2. 按下 ?S 或 Ctrl+S，在輸入框中填寫(xiě)組件名，按下回車(chē)鍵即可生成組件到項(xiàng)目 src/components/ 目錄中。