EasyUI框架是我本科时候后端开发的一个前端框架,用起来比较方便,缺点就是风格、颜色、主题不太行,但是现在济南的很所公司还用easyui开发呢!!本文主要在这里记录一下主要的配置情况,对程序员来说,在很多时候,不是业务逻辑,而是配置文件更令人感觉到头大!!!
首先按照EasyUI的官方文档,引入相关文件:网址:https://www.jeasyui.net/download/vue.html
(1)npm安装
npm install vx-easyui --save
(2)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:250px">
<GridColumn field="itemid" title="Item ID"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
<GridColumn field="status" title="Status" align="center"></GridColumn>
</DataGrid>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
"code": "FI-SW-01",
"name": "Koi",
"unitcost": 10.00,
"status": "P",
"listprice": 36.50,
"attr": "Large",
"itemid": "EST-1"
},
{
"code": "K9-DL-01",
"name": "Dalmation",
"unitcost": 12.00,
"status": "P",
"listprice": 18.50,
"attr": "Spotted Adult Female",
"itemid": "EST-10"
},
{
"code": "RP-SN-01",
"name": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 38.50,
"attr": "Venomless",
"itemid": "EST-11"
},
{
"code": "RP-SN-01",
"name": "Rattlesnake",
"unitcost": 12.00,
"status": "P",
"listprice": 26.50,
"attr": "Rattleless",
"itemid": "EST-12"
},
{
"code": "RP-LI-02",
"name": "Iguana",
"unitcost": 12.00,
"status": "P",
"listprice": 35.50,
"attr": "Green Adult",
"itemid": "EST-13"
},
{
"code": "FL-DSH-01",
"name": "Manx",
"unitcost": 12.00,
"status": "P",
"listprice": 158.50,
"attr": "Tailless",
"itemid": "EST-14"
},
{
"code": "FL-DSH-01",
"name": "Manx",
"unitcost": 12.00,
"status": "P",
"listprice": 83.50,
"attr": "With tail",
"itemid": "EST-15"
},
{
"code": "FL-DLH-02",
"name": "Persian",
"unitcost": 12.00,
"status": "P",
"listprice": 23.50,
"attr": "Adult Female",
"itemid": "EST-16"
},
{
"code": "FL-DLH-02",
"name": "Persian",
"unitcost": 12.00,
"status": "P",
"listprice": 89.50,
"attr": "Adult Male",
"itemid": "EST-17"
},
{
"code": "AV-CB-01",
"name": "Amazon Parrot",
"unitcost": 92.00,
"status": "P",
"listprice": 63.50,
"attr": "Adult Male",
"itemid": "EST-18"
}
]
}
}
}
</script>
解决方案:
1.在文件的根目录下创建vue.config.js文件,然后在里面输入以下代码块即可。
// vue.config.js
module.exports = {
runtimeCompiler: true,
}
这样问题解决,就可以开始尽情的使用easyUI的组件了!!!
完结,撒花撒花!!!!!