UI组件库Kendo UI for Vue中文入门指南（一）

在本文中，您将通过构建一个包含 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 文件并从这个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 for Vue | 下载试用

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

---

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！