Vue项目vue-cli3.x+Mint-UI-------基于脚手架cli3.x 按需引入Mint-ui的组件不起作用、报错、失败

简单的描述下遇到的情况吧:

因为项目需要我采用了Mint-UI，又因为项目是采用的脚手架3,所以官网的使用教程不能直接粘贴过来用，为了项目优化，且项目中也没有采用很多的相关组件，所以不能直接全部引入，只能按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1、安装Mint-UI

直接采用npm或者cnpm(需要安装淘宝镜像)

//cmd命令窗安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后

//安装mint-ui
npm install mint-ui -D  或者
npm install mint-ui -S 
//个都行，亲测！！！

2、需要借助的工具babel-plugin-component

安装

npm install babel-plugin-component -D
//同样npm安装失败的话可以使用cnpm

3、最关键的一步，官网教程里的.babelrc 文件的修改

//这是官网里面的教程，已经很老了，不适用脚手架3.x
{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

//因为使用脚手架3.x的项目，根目录中是没有这个文件的，相应的这个文件已经被babel.config.js替代
//修改babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [["component", 
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]
}

//注意我这是没有加入其他东西，如果你的还有其他的一些东西加进去就行
//最后提示一点，component后面不需要跟[]了，这种写法会报错

4、就是在main.js里面引入你需要使用的组件就行了

//贴部分代码给你们参考下
//使用mit-ui 引入全部组件
import {Tabbar,Swipe,Header,Button,TabItem,SwipeItem} from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
//引入mit-ui全局样式
import 'mint-ui/lib/style.css'

//注意的是Vue.use(xxx)这种写法无效

*好了到这里基本就没了 ，希望能帮助到你们！可以的话给个赞吧