VUE cli3 搭建vue项目引入EasyUI框架，出现错误！！！You are using the runtime-only build of Vue where the template com

蔚落 2023-09-27 10:03 80阅读 0赞

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>

![在这里插入图片描述][166583e3294945eca5194de433bd8743.png]  
**解决方案：**

1.在文件的根目录下创建vue.config.js文件，然后在里面输入以下代码块即可。

// vue.config.js
    module.exports = {
        
    
        runtimeCompiler: true,
    }

![在这里插入图片描述][3083fffb53c149669ff42deb811dede4.png]  
这样问题解决，就可以开始尽情的使用easyUI的组件了！！！  
![在这里插入图片描述][4b86726496574698bc6f7f3fb88b61ef.png]  
完结，撒花撒花！！！！！

[166583e3294945eca5194de433bd8743.png]: https://img-blog.csdnimg.cn/166583e3294945eca5194de433bd8743.png
[3083fffb53c149669ff42deb811dede4.png]: https://img-blog.csdnimg.cn/3083fffb53c149669ff42deb811dede4.png
[4b86726496574698bc6f7f3fb88b61ef.png]: https://img-blog.csdnimg.cn/4b86726496574698bc6f7f3fb88b61ef.png