VS代碼集成

---

立即下載Kendo UI for jQuery

The Kendo UI Productivity Tools for Visual Studio Code 是Visual Studio Code的擴(kuò)展，它增強(qiáng)了使用Kendo UI For jQuery的應(yīng)用程序開發(fā)體驗。這個擴(kuò)展可以通過向?qū)е苯釉赩isual Studio Code中創(chuàng)建項目。

Kendo UI生產(chǎn)力工具提供了一個Kendo UI模板向?qū)?，通過提供一個界面來創(chuàng)建預(yù)先為Kendo UI組件配置的新項目，從而簡化了開發(fā)工作。模板向?qū)峁┝艘粋€空白項目模板，可以通過添加更多帶有網(wǎng)格、圖表、表單和其他內(nèi)容的頁面來進(jìn)一步增強(qiáng)該項目模板。該向?qū)г试S您通過在Default、Bootstrap和Material主題之間進(jìn)行選擇來為應(yīng)用程序配置所需的視覺主題。最終的結(jié)果是一個具有所有所需配置和依賴項的可運(yùn)行應(yīng)用程序。這使您能夠立即開始使用Kendo UI組件。

1. 申請延期

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

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

2. 創(chuàng)建Kendo UI項目

使用Kendo UI模板向?qū)?chuàng)建一個Kendo UI for jQuery項目：

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

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

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

4.選擇所需的模板。

Visual Studio Code的Kendo UI模板向?qū)峁┝藥讉€內(nèi)置模板，用于一些最流行的組件，如網(wǎng)格、圖表和表單。這些模板允許您通過使用這些組件來添加頁面，只需單擊一次。

此外，您可以創(chuàng)建一個Blank項目，擴(kuò)展將生成一個包含所有必要樣式表和單個標(biāo)題元素的頁面。

5.通過選擇主題應(yīng)用所需的樣式。

要設(shè)置應(yīng)用程序的樣式，請選擇一個內(nèi)置的基于Sass-based主題：fault、Bootstrap或Material。

6.單擊Create按鈕完成設(shè)置。

7.運(yùn)行項目：

• 通過在終端輸入NPM Install來安裝NPM依賴項。
• 通過在終端輸入npm start來運(yùn)行應(yīng)用程序。

3.檢查項目結(jié)構(gòu)

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

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

4. 生成代碼片段

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

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

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

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

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

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

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

腳手架工

針對Visual Studio Code的Kendo UI生產(chǎn)力工具擴(kuò)展包含一個scaffolding特性，它使您能夠從交互式向?qū)接脩艚缑嫔蓮?fù)雜的KendoReact組件。

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

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

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

3.單擊Create按鈕。