element ui完整引入后，icon图标显示正常，layout布局内层不显示

Question

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

axios.defaults.baseURL="http://localhost:8080";
//axios.defaults.withCredentials=true;

Vue.use(ElementUI);

Vue.prototype.axios=axios; 

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App) 
}).$mount('#app')  

以上为完整的main文件，可以看到已经引入了ui

<template>
<div>
        <div>布局样式</div>
        <i class="el-icon-edit"></i> //图标出现，说明样式成功
        <el-row :gutter="20">
            <el-col :span="16" :offset="4">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="16" :offset="4">
                <el-container style="height:500px;border:1px solid #eee">
                    <div>123456</div>
                </el-container>
                <el-container style="height:500px;border:1px solid #eee">
                    <div>123456</div>
                </el-container>
            </el-col>
        </el-row>
</div>        
</template> 

以上为模板内容

以上为浏览器显示结果

Answer 1

参考GPT和自己的思路：

根据你提供的信息，可能是因为你在布局内没有正确使用 Element UI 的组件，导致样式没有被正确引入。建议按照 Element UI 的文档和示例正确地使用组件和样式，并检查代码是否存在错误或冲突。另外，可以在浏览器控制台查看错误信息，以找到原因并解决问题。