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',会造成局部引用没有样式的情况,解决办法就是全局引用一下样式。如果有遇到跟我一样问题的朋友,这样做就可以。