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中对每个依赖的引入顺序会影响我们项目的运行。在这个问题中我们需要把新的依赖放在后面,使得顺序正确即可得到正确的功能。
总结:本文只是对一个问题的简单解决,一个问题可能问题产生的效果一样,但是存在的问题可能不一样。有对这类问题的详细解释的原因,欢迎大家一起讨论,一起进步。