Vue3导入Elementplus时组件无法加载的情况及解决
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
Vue3导入Elementplus时组件无法加载
在使用Vue3结合Elementplus做组件导入时,出现了组件无法显示,只在网页中出现了组建template中涉及ui中的相关字符串,或者页面中完全没有显示的情况。
经排错,是由于main.js文件中完整导入时,自作主张将Vue3自带的生成段和ElementPlus提供的部分注册段结合了。
严格按照ElementPlus提供的写法
即可顺利显示组件。
倒推后提出猜想
上面一种写法中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'
可以安装这个稳定的版本:
就可以直接在vue文件中调用了:
1 2 3 4 5 6 7 8 9 10 | < 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 > |
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
在vue-cli 3中给stylus、sass样式传入共享的全局变量
这篇文章主要介绍了在vue-cli 3中, 给stylus、sass样式传入共享的全局变量,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08Vue3使用postcss-px-to-viewport实现页面自适应
postcss-px-to-viewport 是一个 PostCSS 插件,它可以将 px 单位转换为视口单位,下面我们就看看如何使用postcss-px-to-viewport实现页面自适应吧2024-01-01vue使用Vue.extend方法仿写个loading加载中效果实例
在vue中提供v-loading命令,用于div的loading加载,下面这篇文章主要给大家介绍了关于vue使用Vue.extend方法仿写个loading加载中效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论