在本文中，您將通過構建一個包含 Grid、DropDownList、Window 和設計主題的小應用程序來學習如何使用Kendo UI for Vue組件。

Kendo UI最新官方正式版下載

1. 設置Vue項目

• 開始使用Vue的最簡單方法是使用它的CLI，要安裝Vue CLI，請使用以下命令。

安裝命令：

npm install -g @vue/cli

或者

yarn global add @vue/cli

• 安裝 Vue CLI 后，使用以下命令創建項目。

創建項目命令：

vue create my-app

或者

vue ui

可以使用 npm run serve 命令運行新項目。

在開始使用Kendo UI for Vue之前，讓我們稍微清理一下示例應用程序，以下是建議的編輯列表：

• 在 src/components 文件夾中，刪除 HelloWorld.vue 文件
• 在 src/App.vue 文件中：
  • 移除 HelloWorld 組件的導入

import HelloWorld from './components/HelloWorld.vue'

• 從組件的定義中刪除 HelloWorld 組件
• 從模板定義中刪除以下代碼：

<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>

2. 添加JSON數據

添加組件所需的虛擬數據，在src文件夾中創建文件夾appdata，將以下文件添加到appdata文件夾。

• 添加一個 src/appdata/categories.json 文件并從這個文件中復制內容。
• 添加 src/appdata/products.json 文件并從文件中復制內容。

3. 導入Kendo UI for Vue組件

Kendo UI for Vue以多個NPM包的形式分發，范圍為@progress。 例如，Grid包的名稱是@progress/kendo-vue-grid。

Kendo UI for Vue是一個包含許多模塊化組件的豐富套件，對于我們的儀表板示例，使用其中三個組件：Grid、DropDownList 和 Window。

讓我們添加上述組件的包及其依賴項：

npm install --save @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing

或者

yarn add @progress/kendo-vue-grid @progress/kendo-data-query @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-vue-dropdowns @progress/kendo-vue-dateinputs @progress/kendo-drawing @progress/kendo-vue-data-tools @progress/kendo-vue-animation @progress/kendo-licensing

如上所示，我們不僅添加了Grid和DropDownList的包，還添加了另一個重要的包——kendo-data-query，它包含用于客戶端數據操作的有用功能。

要安裝Window組件，請運行以下命令：

npm install --save @progress/kendo-vue-dialogs @progress/kendo-licensing

或者

yarn add @progress/kendo-vue-dialogs @progress/kendo-licensing

4. 為Kendo UI for Vue導出CSS樣式

Kendo UI for Vue包括三個華麗的主題，它們都可以作為單獨的 NPM 包提供。 可用的主題包是,  和 。

讓我們使用默認主題并安裝它：

npm install --save @progress/kendo-theme-default

或者

yarn add --save @progress/kendo-theme-default

從src/App.vue文件中的包中導入CSS文件，如果需要，可以在 src/App.vue 文件的 <styles> 標記中添加任何其他自定義樣式。

這是我們應該添加的內容：

import '@progress/kendo-theme-default/dist/all.css';

Kendo UI for Vue | 下載試用

Kendo UI致力于新的開發，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件，幫助開發人員構建下一代應用程序。它是為Vue技術框架提供可用的Kendo UI組件，以便更快地構建更好的Vue應用程序。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論