Vue按需引用Mint-ui中的注意点

首先安装mint-ui这个毫无疑问

npm i mint-ui -S

官网上面已经说明了如何按需引用，但是需要注意几点

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

这步当然毫无疑问，下面的这步我就怀疑了，初次直接替换了内容，果然出错了，

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

注意这里是不能直接复制官网的修改，因为你默认还有其他的模块配置，以下是修改好的，当然这个也不是你复制过去就可以直接使用的，具体看项目

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

然后npm run dev,果然出错了，想成功那是不可能的，我这里少了es2015这个模块，需要先安装下：

npm install babel-preset-es2015 --save-dev

然后就可以成功的运行了，下面是按需引用的代码,写在main.js文件中

import 'muse-ui/dist/muse-ui.css';
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

或者在对应的组件 中写入：

import { Swipe, SwipeItem } from 'mint-ui';	
components:{
	'mt-swipe':Swipe,
	'mt-swipe-item':SwipeItem
},

然后在你需要的地方写入

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

然后运行，你以为就会显示了吗？嘿嘿，你想错了，最后一步需要给swiper的父容器设置宽高，就可以正常运行了

官网API https://mint-ui.github.io/docs/#/zh-cn2/swipe