Mint UI 全局引入和按需引入

1. 首先安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

2.在main.js中引入全局

引入全局模块
 import Mint from 'mint-ui';
引入全局样式
import 'mint-ui/lib/style.css'
全局注册组件
Vue.use(Mint);

 

然后使用即可；

按需引入

按需引入我们只需要 在js文件中

引入想要的模块
import {Button} from 'mint-ui';
注册模块
Vue.component('my-btn', Button);

其中，my-btn是你手动定义的名字，比如我这里引用了Button ，那么将来直接引用my-btn就能呈现页面上按钮效果。
检测是否引用成功，可以 console.log(Button.name)来判断。

你以为就已经完毕了吗？不着急，还有最后一小步
我们需要安装依赖，使得能够支持按需引入

 

安装
npm install babel-plugin-component -D

 

 只有这样还不行

修改.babelrc文件

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime",["component",
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]
    ]
}

面操作完毕后，我们只需要引用自己的自定义的Vue.component('my-btn', Button);组件名称就可以使用了。JS的引用和局部引用一样，他们不受全局的影响。都是按需引用

注意，官网上写的["es2015", { "modules": false }]我们可以不必填写，这一句对我们的代码没有任何影响，已经过时，官网没有及时更新。我们只需要复制plugins的部分。

另外还需要注意，如果你的.babelrc文件里面已经有其他的配置，那么请复制plugins里面的内容追加到你的配置，使用逗号分隔。而不是全部覆盖你自己原有的代码。

这里还有一个大坑！！！

我这个版本，发现局部引用，如果不全局引用import 'mint-ui/lib/style.css'，会造成局部引用没有样式的情况，解决办法就是全局引用一下样式。如果有遇到跟我一样问题的朋友，这样做就可以。