前提:
在main.js
里完整引入
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
之前就有的:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: { App }
})
使用css组件
直接将官方文档所给代码放在主页面的显示区
比如:
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
使用JS组件
比如 Toast组件使用步骤:
1.引入组件import { Toast } from 'mint-ui';
2.在script
里再定义数据和方法
export default {
data(){
return {}
},
methods:{
show(){
Toast({
message: '提示',
position: 'bottom',
duration: 1000 //显示时间
});
}
}
}
3.在所需要的按钮上面添加绑定事件<mt-button type="default" @click="show">default</mt-button>
4.点击既可以触发