vue爬坑之旅——mint-ui按需引入

今天开项目，决定使用 Vue 来进行开发，遂开始寻找 Vue 相关的 Ui 组件库，找了一圈看下来，Github 上 star 数最高的二个分别为 Mint-ui 和 Vux，分别扫了他们的二维码体验了下，发现 Vux 在界面切换的时候不流畅，所以就剩下 Mint-ui 这一个选择了。下面开始今天的爬坑之旅。

坑一：npm 5.8.0

在新建项目的时候发现 npm 有新的版本升级，就顺手升级了下 npm （其实是强迫症，不升级不舒服斯基，，，，），升级过程顺利，然后到了 npm install 的时候就开始悲剧了，install 完成之后老是报错，

npm error write after end

•  

忘记截图了，应该是这个错误，既然 install 的时候出错了，那么当然就不能愉快的 run 了，经过一番折腾，终于找到原因，原来这是 npm 高版本的一个bug，很多人都碰到了，从 npm 5.7.0 开始有这 bug，，，所以积极升级并不是一个好事，这里把 npm 降级到 5.6.0 可以解决这个问题。

npm install npm@5.6.0 -g

坑二：Mint-ui 按需引入文档

按照 Mint-ui 的官方文档，首先 install Mint-ui ，这没什么好说的，安装完之后就是在项目中引入了，按照官方的说法，有全部引入和按需引入二种方式。作为实际项目开发来说，当然应该选择按需引入的方式，这可以减小我们项目的体积，加快加载速度。 
按照文档，先安装 babel-plugin-component，然后修改 .babelrc 在这里文档上的说法是将 .babelrc 文件改为：

1. {

2. "presets": [

3. ["es2015", { "modules": false }]

4. ],

5. "plugins": [["component", [

6. {

7. "libraryName": "mint-ui",

8. "style": true

9. }

10. ]]]

11. }

那么我们打开这个文件看一下，未修改过的文件内容如下：

1. {

2. "presets": [

3. ["env", {

4. "modules": false,

5. "targets": {

6. "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

7. }

8. }],

9. "stage-2"

10. ],

11. "plugins": ["transform-vue-jsx", "transform-runtime"]

12. }

这里面是有一些默认配置的，如果我们直接把文件修改成文档上的那样的话我觉得是有问题的，我觉得这里应该是写文档的人没有把意思说清楚，应该是在这个文件中将 Mint-ui 需要的配置添加进去，而不是直接覆盖原文件，所以我是将文档中说的二个配置加入到原文件相应的内容下面，修改后的内容如下：

1. {

2. "presets": [

3. ["es2015", { "modules": false }],

4. ["env", {

5. "modules": false,

6. "targets": {

7. "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

8. }

9. }],

10. "stage-2"

11. ],

12. "plugins": [

13. "transform-vue-jsx",

14. "transform-runtime",

15. ["component", [

16. {

17. "libraryName": "mint-ui",

18. "style": true

19. }

20. ]]

21. ]

22. }

到了这里，准备工作已经做完，按照文档，引入需要的组件，使用，然后 npm run dev ，你以为可以愉快的玩耍了？too yang。 
在运行命令之后，会出现报错 

Module build failed: Error: Couldn't find preset "es2015" relative to directory XXXXXXXX

出现这个错误是因为我们没有安装 babel-preset-es2015，这个时候只需要单独安装下 babel-preset-es2015 就可以了

npm install babel-preset-es2015

安装好了之后就可以正常运行了，这个时候就可以实现组件按需引入了。

更多的思考

问题是解决了，那么 babel-preset-es2015 这个到底是什么东西呢？找了下，发现一个帖子， https://zhuanlan.zhihu.com/p/29506685 
看完上面的帖子，再结合 babelrc 文件中的内容来看，其实 babel-preset-es2015 这个依赖我们完全是没有必要引入的，所以文档中写的第一个配置 [“es2015”, { “modules”: false }] 也是完全没有必要的，因为官方已经为我们把配置写好了，原来的 es2015” 已经被 “env” 取代，而 “env” 这个配置已经给我们写好了。 
现在将 [“es2015”, { “modules”: false }] 去掉，然后将 babel-preset-es2015 也删掉，重新 run ，发现也是可以的。 
到这里，我想大家应该已经清楚了，这还是文档的坑，文档上面的配置已经过时了，但是他们没有更新，导致我们在接入的时候话费额外的时间和精力。

总结

最后在总结下，如果要按需引入 Mint-ui 的组件，其实要做的事情很简单，首先创建项目，初始化模版，安装依赖，这些是每个项目都需要做的。 
然后是安装 Mint-ui，修改 .babelrc 文件，注意这里只需要在 plugins 下面加入如下代码即可

1. ["component", [

2. {

3. "libraryName": "mint-ui",

4. "style": true

5. }

6. ]]

然后按照文档的指示就可以愉快的玩耍了。 

以上就是这次的爬坑过程，记录下来，希望对碰到同样问题的朋友能够有所帮助。

原文地址：https://blog.csdn.net/zgh0711/article/details/79700185

这里粘贴复制过来是怕收藏的话作者会把文章给删除了！