在本文中，您将通过构建一个包含 Grid、DropDownList、Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件。
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 文件并从这个GitHub文件中复制内容。
- 添加 src/appdata/products.json 文件并从GitHub文件中复制内容。
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 包提供。 可用的主题包是@progress/kendo-theme-default, @progress/kendo-theme-bootstrap 和 @progress/kendo-theme-material。
让我们使用默认主题并安装它：
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致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。
Telerik_KendoUI产品技术交流群：726377843 欢迎一起进群讨论