1. 首页

VUE 爬坑之旅– Mint-ui 按需引入

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

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

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

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

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

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      }
    ]]
  ]
}

到了这里,准备工作已经做完,按照文档,引入需要的组件,使用,然后 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 下面加入如下代码即可

["component", [
    {
        "libraryName": "mint-ui",
        "style": true
    }
]]

然后按照文档的指示就可以愉快的玩耍了。
以上就是这次的爬坑过程,记录下来,希望对碰到同样问题的朋友能够有所帮助。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:VUE 爬坑之旅– Mint-ui 按需引入

链接:https://www.javascriptc.com/1997.html

原文链接:

« 【 ECMAScript 6进阶十】之我们来聊聊 Async
immutability-helper因React官方出镜之使用心得»
Flutter 中文教程资源

相关推荐

QR code