VS代碼集成

立即下載Kendo UI for jQuery

The Kendo UI Productivity Tools for Visual Studio Code 是的擴展，它增強了使用Kendo UI For jQuery的應用程序開發體驗。這個擴展可以通過向導直接在Visual Studio Code中創建項目。

Kendo UI生產力工具提供了一個Kendo UI模板向導，通過提供一個界面來創建預先為Kendo UI組件配置的新項目，從而簡化了開發工作。模板向導提供了一個空白項目模板，可以通過添加更多帶有網格、圖表、表單和其他內容的頁面來進一步增強該項目模板。該向導允許您通過在Default、Bootstrap和Material主題之間進行選擇來為應用程序配置所需的視覺主題。最終的結果是一個具有所有所需配置和依賴項的可運行應用程序。這使您能夠立即開始使用Kendo UI組件。

1. 申請延期

您可以通過以下任何一種方式獲得擴展：

• 進入Visual Studio市場。
• 在VS Code中，打開Extensions選項卡，搜索Kendo UI Productivity Tools，然后單擊Install。

2. 創建Kendo UI項目

使用Kendo UI模板向導創建一個Kendo UI for jQuery項目：

1.按Ctrl+Shift+P (Windows或Linux)，或Cmd+Shift+P (Mac)打開VS Code擴展啟動器。

2.輸入或選擇Kendo UI Template Wizard: Launch并按Enter鍵啟動擴展。

3.輸入項目名稱并選擇位置。

4.選擇所需的模板。

Visual Studio Code的Kendo UI模板向導提供了幾個內置模板，用于一些最流行的組件，如網格、圖表和表單。這些模板允許您通過使用這些組件來添加頁面，只需單擊一次。

此外，您可以創建一個Blank項目，擴展將生成一個包含所有必要樣式表和單個標題元素的頁面。

5.通過選擇主題應用所需的樣式。

要設置應用程序的樣式，請選擇一個內置的基于：fault、Bootstrap或Material。

6.單擊Create按鈕完成設置。

7.運行項目：

• 通過在終端輸入NPM Install來安裝NPM依賴項。
• 通過在終端輸入npm start來運行應用程序。

3.檢查項目結構

• HTML文件位于項目的pages文件夾中。
• 腳本文件位于項目的src文件夾中。
• 樣式表包含在每個單獨頁面的head元素中。

提示：只有當腳本名稱與頁面名稱匹配時，腳本才會自動注入HTML頁面。例如，如果頁面名為MyPage.html，那么src文件夾中的腳本文件必須名為MyPage.js。

4. 生成代碼片段

Kendo UI生產力工具擴展提供了一個方便的特性，通過Kendo UI庫代碼片段改進了日常開發，代碼片段簡化并加快了項目中Kendo UI組件的實現。它們通過提供一種直接在源代碼中添加組件的快速方法來幫助開發過程，同時還包括用于所需選項的預定義選項卡。

為一個Kendo UI組件添加一個代碼片段：

1.在IDE中打開源代碼，然后單擊要插入Kendo UI for jQuery組件的位置。

2.要列出Kendo UI for jQuery片段，請鍵入kj- snippet前綴。

 3.繼續輸入要插入的組件的名稱。有些組件由多個代碼片段提供，允許您根據所需的配置以各種方式創建它們，例如kj-grid和kj-grid-remote。

4.按Enter鍵在源代碼中插入所需的組件。

5.(可選)如果組件為特定屬性提供占位符，您可以通過按Tab鍵迭代并提供它們。

腳手架工

針對Visual Studio Code的Kendo UI生產力工具擴展包含一個scaffolding特性，它使您能夠從交互式向導式用戶界面生成復雜的KendoReact組件。

要使用腳手架功能，請按照以下步驟操作：

1.在VS Code資源管理器面板中，右鍵單擊jQuery應用程序中的一個文件夾。

2.從列表中選擇一個組件。目前，Data Grid、Chart、Form和Scheduler組件都支持腳手架。

3.單擊Create按鈕。