Vue3导入Elementplus时组件无法加载的情况及解决
更新时间：2024年03月15日 09:02:00 作者：AXISAGA
这篇文章主要介绍了Vue3导入Elementplus时组件无法加载的情况及解决方案,具有很好的参考价值,希望对大家有所帮助
Vue3导入Elementplus时组件无法加载
在使用Vue3结合Elementplus做组件导入时，出现了组件无法显示，只在网页中出现了组建template中涉及ui中的相关字符串，或者页面中完全没有显示的情况。
经排错，是由于main.js文件中完整导入时，自作主张将Vue3自带的生成段和ElementPlus提供的部分注册段结合了。
app.use(ElementPlus)
createApp(App).mount('#app')严格按照ElementPlus提供的写法
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')即可顺利显示组件。
倒推后提出猜想
上面一种写法中app的声明是ElementPlus注册之后才创建的，也就是说Element注册被调用时，注册到了一个还没有产生，并不存在的“app”上，这样的注册显然是空的无效的。
而后产生的app也不会被之前的注册影响。
后一种写法，在创建完app后，先将Element注册于其上，再mount进App.vue中，这就保证了app注册进Vue主文件中时，一定是注册好Element的。
这个案例提供的思考应该不仅限于此，可以说，Vue3 CLI自带的main.js虽然简化了app全局注册的写法，但是在需要注册其他绑定app的依赖时，都需要采用后者的写法。
vue3按需导入element-plus报错Module not found: Error: Can‘t resolve‘element-plus/es/components/button/
由于element-plus版本更新迭代较快，直接安装npm install element-plus -D会默认安装最新版本，使用时可能会报错：
Module not found: Error: Can't resolve 'element-plus/es/components/button/style/css'
可以安装这个稳定的版本：
npm i element-plus@1.3.0-beta.5 -D
就可以直接在vue文件中调用了：
<template>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
</template>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
webpack dev-server代理websocket问题
这篇文章主要介绍了webpack dev-server代理websocket问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要给大家介绍了关于vue-cli脚手架打包静态资源请求出错的原因与解决方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了基于Vue+ElementUI的省市区地址选择通用组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了在vue中动态修改css其中一个属性值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下2023-08-08
vue-element-admin+flask实现数据查询项目的实例代码
这篇文章主要介绍了vue-element-admin+flask实现数据查询项目,填写数据库连接信息和查询语句，即可展示查询到的数据，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Sublime Text新建.vue模板并高亮(图文教程)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
element UI中el-dialog实现拖拽功能示例代码
我们在开发中常会遇见拖拽的功能,下面这篇文章主要给大家介绍了关于element UI中el-dialog实现拖拽功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要给大家介绍了关于Vue实现登录功能(含封装axios)的相关资料,Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,需要的朋友可以参考下2023-10-10
最新评论