面试遇到的坑

前端小伙伴们在技术面中，面试官进场会问到，你在项目中遇到过什么坑？你是怎么解决的？其实呢，这不仅能看出你是不是真真做过项目，重点要的是看你遇到问题是怎么解决的？如果没有总结过的小小伙伴，面试的时候会有一时想不起来的经历；那就需要我们在学习和工作的过程中去总结；也可以百度看看人家遇到的坑，还有人家是 怎么解决的；

这里给大家介绍一下mint-ui框架的坑

大家都知道mint-ui已经有很久没有更新了，最后一次更新在2017年；所以mint UI只支持vue2.0 2.1 2.2 ，而vue已经跟新到2.5了，mint-ui不支持现在更新到的2.5，而vu的2.0和2.5又有很大的差别，所以mint UI会有兼容问题。

那mint-UI又是什么呢？

我们引入的mint-ui是引入的lib下面的index.js，而lib文件夹是src文件夹编译出来的；

查看mint-ui的源代码： index.js中引入了大量的组件，在install方法中得到Vue，不断的Vue.component('组件名字','组件对象')，还往Vue上面添加全局的方法，然后export default暴露；其实就是把一堆的UI组件打包出来了

问题来了

mint-ui完整引入方式是不友好的；初始化开销大，use一下lib下的index代码都会执行，导致app的首次渲染速度下降。所以我们想要按需加载。

那么坑来了

当我们按需引入的时候，mint-ui是2017年最后更新的，所以我们用 babel-plugin-component，插件适配我们的项目是完全用不了的，因为这个插件是适用于babel6.0的版本，而我们目前的版本已经跟新到7.0了（查看babel-loader里的readme.md），而babel-plugin-component，所依赖的版本是6.0的版本，6.0 和7.0差别很大；所以我们给babel上面加6.0的插件是加不上的，会报错的。所以 babel-plugin-component用不上，那是不是不能按需引入了呢？并不是 。

分析问题：

那我们babel-plugin-component这个插件的作用是什么呢？他只不过是吧我们的这个组件和样式结合到一块，那咱们看完全引入的方式是不是咱们把逻辑部分和演示部分一起引入了。按需引入的方式 babel-plugin-component这个插件只不过是识别到引入某个组件并把组件所对应的样式引入进来。 babel-plugin-component这个插件其实就是负责加载样式的。

简单的解决方法：

换个ui框架吧！有赞公司的vant-ui不是很好用吗？哈哈哈哈

重新来，最简单的解决方法：

简单的方法就是引入需求的逻辑部分，样式部分还是全部引入就好了；是不是很简单？