在本文中，您將通過(guò)構(gòu)建一個(gè)包含 Grid、DropDownList、Window 和設(shè)計(jì)主題的小應(yīng)用程序來(lái)學(xué)習(xí)如何使用Kendo UI for Vue組件。

Kendo UI最新官方正式版下載

1. 設(shè)置Vue項(xiàng)目

• 開(kāi)始使用Vue的最簡(jiǎn)單方法是使用它的CLI，要安裝Vue CLI，請(qǐng)使用以下命令。

安裝命令：

npm install -g @vue/cli

或者

yarn global add @vue/cli

• 安裝 Vue CLI 后，使用以下命令創(chuàng)建項(xiàng)目。

創(chuàng)建項(xiàng)目命令：

vue create my-app

或者

vue ui

可以使用 npm run serve 命令運(yùn)行新項(xiàng)目。

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

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

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數(shù)據(jù)

添加組件所需的虛擬數(shù)據(jù)，在src文件夾中創(chuàng)建文件夾appdata，將以下文件添加到appdata文件夾。

• 添加一個(gè) src/appdata/categories.json 文件并從這個(gè)文件中復(fù)制內(nèi)容。
• 添加 src/appdata/products.json 文件并從文件中復(fù)制內(nèi)容。

3. 導(dǎo)入Kendo UI for Vue組件

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

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

讓我們添加上述組件的包及其依賴項(xiàng)：

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的包，還添加了另一個(gè)重要的包——kendo-data-query，它包含用于客戶端數(shù)據(jù)操作的有用功能。

要安裝Window組件，請(qǐng)運(yùn)行以下命令：

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

或者

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

4. 為Kendo UI for Vue導(dǎo)出CSS樣式

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

讓我們使用默認(rèn)主題并安裝它：

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

或者

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

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

這是我們應(yīng)該添加的內(nèi)容：

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

Kendo UI for Vue | 下載試用

Kendo UI致力于新的開(kāi)發(fā)，來(lái)滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開(kāi)發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論