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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue 提供了createElement 来创建虚拟dom，方便我们来函数化的方式来定义复杂的组件结构，这篇文章主要介绍了Vue 中 createElement 使用详解,需要的朋友可以参考下2022-10-10
这几天，我做了一个vue移动端的小项目，本文主要介绍了Vue移动端apk项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue的route-view子页面调用父页面的函数详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了关于vue-cli3+webpack热更新失效及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3全局属性app.config.globalProperties的实现
Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
在Vite中使用Terser插件可以对JavaScript代码进行压缩和混淆处理,本文就来详细的介绍一下Terser插件的使用,具有一定的参考价值,感兴趣的可以了解一下2025-10-10
这篇文章主要介绍了Vue.js实现一个漂亮、灵活、可复用的提示组件示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了Vue入口文件index.html缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
对请求的封装在实际项目中是十分必要的,它可以让我们统一处理 http 请求,比如做一些拦截,处理一些错误等,本篇文章将详细介绍如何封装 axios 请求,需要的朋友可以参考下2023-09-09
最新评论