安装Kendoui

Kendoui 是一套 JavaScript UI 库，感觉就是皮肤做的比较漂亮，Grid 功能也非常强，之前用 jQuery 时使用过，最新版的 Kendo UI 支持了Vue，所以拿这个库测试一下。

安装 Kendo UI Grid 

Grid 用的最多，所以拿 Gird 开始。

安装简单，不用下载什么的，直接 npm，在node.js世界里，只有 npm...

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-grid-vue-wrapper

编写模版

下面我们需要写模版和注册组件。

表格的模版

创建一个vue模版，我们在components文件夹下创建一个grid.vue文件，内容如下：

<template>
	<div>
		<Grid :data-source="localDataSource">
		</Grid>
	</div>
</template>

<script>

import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Grid } from '@progress/kendo-grid-vue-wrapper'

export default {
	name: 'KendoGrid',
	components:{
		Grid
	},
	data: function(){
        return {localDataSource: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 17,
                "UnitsInStock": 40,
                "Discontinued": false,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
            }
        ]}	
	}
}
</script>

注册组件

我们需要将自定义的Grid组件注册，打开App.vue文件，修改如下

<template>
  <div id="app">
    <img src="./assets/logo.png" title="hi logo!">
    <hello-world msg="漫漫鱼学习 Vue.js App"/>
	<hello-grid />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloGrid from './components/grid.vue'

export default {
  name: 'app',
  components: {
	  'hello-world':HelloWorld,
	  'hello-grid':HelloGrid
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

重新编译

我们点击编译按钮，cli将自动创建dist文件夹和文件。

运行 demo

我们在浏览器中输入地址，查看到如下结果，出现了 Kendoui 表格。

小结

今天在注册组件的时候花时间看了一下Vue的文档，这块还没有很深的理解，只能靠后面多写代码才能熟悉了。 到今天为止，对Vue的感觉是也挺繁琐的，各种tags，要记住还要理解透彻。其实 Vue 就是制定了一套写前端的规则，所有都需要按照规则写，这样的好处是规范了代码，Vue为了实现这个规则做了高度的抽象，这个可能就是个jQuery的一个区别吧，jQuery的选择器随便你写，找到dom随便你怎么操作。

今天的例子做完了，但是留下几个问题：

• webpack打了一个20M多的JS，这太大了，它把所有kendoui都打进去了，实际环境应该kendoui单独引用。
• 目前的数据是固定的数组，实际数据应该来自服务器端的url，如何动态加载，服务端排序等还需要后面继续学习。