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>