VUE3中布局失效，页面无法显示

1.问题来源

在对vue项目进行书写时，在用图形化界面重新创建一个vue项目后。在使用element ui时发现无论怎样都显示不出来我想要的效果，一个简单的代码如下

<template>
  <el-header>head</el-header>
</template>

<script>
export default {

}
</script>

<style>

</style>

显示效果如下：

可见没有任何显示的效果，这对我想用的的组件也产生了影响，完全无法使用。

2.问题解决

我再使用以前我写的项目发现是可以运行的，我在重复删除项目和创建项目后我仍然无法解决问题。查询网上的方法，也不能解决。于是我突发奇想吧main.js中的文件改为可以运行的发现结果就可以运行了。

原来的main.js代码：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus).mount('#app')

更改之后可以：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus' //引入elment-plus
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(router).mount('#app')

结果可以得到：

这就可以解决这个问题，这只是大致的解决方案。

3.解决方案

在vue3项目中我们对main.js中对每个依赖的引入顺序会影响我们项目的运行。在这个问题中我们需要把新的依赖放在后面，使得顺序正确即可得到正确的功能。

总结：本文只是对一个问题的简单解决，一个问题可能问题产生的效果一样，但是存在的问题可能不一样。有对这类问题的详细解释的原因，欢迎大家一起讨论，一起进步。