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中文网！

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

UI组件库Kendo UI for Vue中文入门指南（四）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 7. ...
UI组件库Kendo UI for Vue中文入门指南（二）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 5. ...
UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
jQuery UI组件库Kendo UI使用技巧小分享
Kendo UI for jQuery R3 2020 SP1试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI ...
Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
React UI 组件库 Chakra UI - 01 v1.0介绍和快速使用
Chakra UI Chakra UI 是简单.模块化和可访问的 UI 组件库. 本文 Chakra UI 版本:v1.6.2 基于 React 和 Emotion(CSS-IN-JS 方案库) 基于 ...
React UI 组件库 Chakra UI - 05 案例实践
案例实践使用 create-react-app 新建项目. 表单使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...
React UI 组件库 Chakra UI - 02 颜色模式
Color Mode 颜色模式 Chakra UI 内置支持管理应用程序的颜色模式,默认可配置的颜色模式有浅色模式(light).暗色模式(dark).系统模式(system). 大部分组件默认都支持 ...
React UI 组件库 Chakra UI - 03主题对象和 chakra factory
主题对象使用 Chakra UI 默认主题对象中包含很多样式的预设值. 打印 theme 对象: 在使用样式属性设置样式的时候,Chakra 会先从主题对象中获取对应的预设值,如果不存在,则将值作为 ...

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

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

最新文章

热门文章