easyui for vue

最近在学习，vue版本的easyui，下面记录一下学习过程的心得。

1，安装相关的工具，

我使用的vue-cli脚手架搭建的项目，

安装node.js， node.js下载地址 ，安装完成之后，查看版本如下

npm在国内网速较慢，并且下载相关依赖时容易下载不完全，所以推荐使用 淘宝镜像，cnpm

安装方法：$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

下面安装vue-cli：$  cnpm install -g vue-cli

2，新建项目，

选则一个文件夹，打开cmd或者PowerShell，运行命令， $ vue init webpack my-vue， 其中my-vue是你的项目名一路默认回车，直到选则创建项目之后是否使用npm

打开my-vue，运行，cnpm install命令，然后cnpm run dev ，看到下图就成功了。

ctrl+c停止之后，运行cnpm install vx-easyui --save，安装easyui ，然后在main.js中添加

import 'vx-easyui/dist/themes/default/easyui.css';
import 'vx-easyui/dist/themes/icon.css';
import 'vx-easyui/dist/themes/vue.css';
import EasyUI from 'vx-easyui';
Vue.use(EasyUI);

 

<template>
    <div>
        <DataGrid :data="data" style="height:300px">
            <GridColumn field="itemid" title="Item ID"></GridColumn>
            <GridColumn field="name" title="Name"></GridColumn>
            <GridColumn field="price" title="Price" align="right"></GridColumn>
            <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
        </DataGrid>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: [
                    {                       
                        "name": "Ko",
                        "price": 36.50,
                        "attr": "Large",
                        "itemid": "vue-1"
                    },
                    {
                         "name": "Ko",
                        "price": 36.50,
                        "attr": "Large",
                        "itemid": "vue-1"
                    },
                    {
                       "name": "Ko",
                        "price": 36.50,
                        "attr": "Large",
                        "itemid": "vue-1"
                    },
                    {
                        "name": "Ko",
                        "price": 36.50,
                        "attr": "Large",
                        "itemid": "vue-1"
                    },
                    {
                        "name": "Ko",
                        "price": 36.50,
                        "attr": "Large",
                        "itemid": "vue-1"
                    },
                    {
                         "name": "Ko",
                        "price": 36.50,
                        "attr": "Large",
                        "itemid": "vue-1"
                    }                   
                ]
            }
        }
    }
</script>