Mint-Ui

需求需要使用 mint-ui switch 等组件 引入mint-ui，但是不想全部引用，按需引入 官方文档之快速入手篇 记录下爬坑之旅： 1.npm intall mint-ui --save 2.npm install babel-plugin-component //需要安装这个插件3.修改 babel.config.js 文件module.exports = { presets: [ '@vue/app' ], plugins:[ [ "component", { "libraryName": "mint-ui", "style": true } ] ]}如果已经有值，在后面追加配置即可module.exports = { presets: [ '@vue/app' ], plugins: [ "transform-vue-jsx", "transform-runtime", ["component", [ { "libraryName":"mint-ui", "style":true } ] ] ]}4. 在main.js 中添加 引入组件的配置需要什么组件，去mint-ui，src下面的index.js 中找，默认会找这个文件,看导出哪些组件名，需要就拿过来用import { Switch, Range } from 'mint-ui' import 'mint-ui/lib/style.css'Vue.component(Switch.name, Switch)Vue.component(Range.name, Range) //Vue.use 不行，抛弃成功大吉！顺便记录下全部引入 ...

mint-ui官方api文档一、安装mint-uinpm install mint-ui –save二、全局引入mint-ui全局引入也就是在全部组件中都可以使用mint-ui，所以需要在vue项目的入口文件main.js中引用。–/main.js–import Mint from ‘mint-ui’;Vue.use(Mint);import ‘mint-ui/lib/style.css’; 三、在组件中引用toastthis.$toast({message: ‘暂无我的收藏’})四、在组件中引用messagebox—–html—–<button @click=“cancel(item.favorite_id)” class=“cancel”>取消收藏</button>——js—— methods: { cancel(id) { this.$messagebox.confirm(‘是否取消收藏’).then(action => { if (action === ‘confirm’) { cancelCollect(this.info.token, id).then(res => { getCollect(this.info.token).then(res => { this.collectobj.collectdata = res.data.data.data }) }) } }).catch(err => { if (err === ‘cancel’) {} }) } }效果如下：MessageBox 提供了 alert、confirm 和 prompt 三个方法，它们都返回一个 Promise Promise 是ES6的内容。它是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。