菜鸟在B站学习黑马Vue教程项目中遇到的问题

在跟随老师开发过程中,到第Day9天处理滚动导航栏时需要用到mui这个UI框架,其中出现打包过程的严格模式等问题,教程是17年的视频,一些设置和现在有所不同,需要查找下载最新的包进行安装下载以及配置。
我的问题是在处理严格模式后,出现如下错误:

Uncaught ReferenceError: _Header is not defined
at eval (main.js:48)
at Object…/src/main.js (bundle.js:4033)
at webpack_require (bundle.js:727)
at fn (bundle.js:101)
at eval (client:3)
at Object.0 (bundle.js:4055)
at webpack_require (bundle.js:727)
at bundle.js:794
at bundle.js:79

当时一点解决思路都没有,一直以为是在处理严格模式打包时导致的,一直盯着这块不放,瞎搞一天毫无收获,直接复制错误百度,结果只有一条相关,还是一位兄弟也出现这个问题。后来发现,在前面,使用过mint-ui这个UI框架,通过按需导入所需要的插件,其中就用到了如下组件:

Vue.component(Header.name,Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)

想着吧,问题应该就出现在这个Header组件上,凭感觉删了试试,结果又说:

main.js:45 Uncaught ReferenceError: _Swipe is not defined
at eval (main.js:45)
at Object…/src/main.js (bundle.js:4000)
at webpack_require (bundle.js:727)
at fn (bundle.js:101)
at eval (client:3)
at Object.0 (bundle.js:4022)
at webpack_require (bundle.js:727)
at bundle.js:794
at bundle.js:797

到这,看来这问题是“一窝都是”,竟然如此,全部导入试试,结果,果真灵验,项目正常了,滑动菜单也好了。
后来想想,项目中用到很多第三方的包,相互之间的引用,难免会有冲突(重名冲突等),经过取消严格模式后,一些规范问题出来也应该很正常,如果把属入不同包的“儿子”限定其活动范围,出来搞事的机会应该会少一些,但是难免会有一些漏网之鱼,反正方法总比困难多,没有思路就都试试嘛,总有一个灵验的。(以上都是本人猜想,如果有大神路过,给我普及一下也是会非常感激您的)

完整的解决方法:

import {Header,Swipe, SwipeItem,Button} from ‘mint-ui’
Vue.component(Header.name,Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)

以上方式使用mint-ui这个框架的方式改为全局引用:
import mint from ‘mint-ui’
Vue.use(mint)

我项目中按需引入的组件都是在main.js下,可能在需要用到的组件里面进行按需引入会不会同样呢能够解决这个问题呢?我还没尝试过这种办法,尝试完了再告诉大家,毕竟全局引入再一定程度上会加大项目打包后的大小,所以并不是一个最好的办法。如果有更好的办法欢迎大家的赐教,谢谢。

https://www.bilibili.com/video/av50680998挺好的一个教程,可以一起学习一下。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值