vue-mint-ui简单使用

首先项目用到了mint-ui

安装   cnpm i mint-ui -S

然后按照官网的操作，将mint-ui导入main.js

实操

将所有准备工作准备就绪，下面就可以使用mint-ui

在main.js 里面，render要渲染的是app

而app是从App.vue里面导入的，所以要想实现渲染，要在App.vue里面写

先来看看官网的CSS

不要慌，跟bootstrap一样，喜欢那个，复制粘贴

至于他的一些属性，看文档

但是要注意，template只能有一个根，所以，要通一放在div里面

接下来是js，js就是高级，用的时候要在script标签里面导入你要使用的组件 ，当然复制粘贴就可以

最简单的点击按钮，显示信息

在按钮上面绑定事件，点击触发函数。在<script></script>里面写函数，但是要注意，vue里面的template不能直接使用script里面的代码，需要先将script里面的代码暴露出来  export default {

data；

methods

}

 

基本使用。但是你如果对样式不满意，可以Toast({})  以对象的形式，写属性

这里需要注意，都是以字符串的形式来写值，而且要是想自己写样式需要指定className,然后再单独的css文件写，最后不要忘了在main.js导入css ,如果想要字体图标，需要安装bootstrap,并且在main里面导入，在App.vue里面用iconClass写入字体文字

现在有一个需求：打开页面，自动弹框，三秒之后。关闭

1：先需要写好弹框的函数

2：自动弹框，并且三秒关闭----

用三生命周期函数 created 里面调用getList方法，getList里面先调用show，show完之后，定时器三秒关闭

Toast提示会返回一个Toast实例，每个实例都有close方法，但是你有函数两个，一个定时器，该怎么用Toast的实例，是个问题？

在data里面定义一个 instance ：null  ---在下面就可以用this.instance来接受，返回的实例，接收到这个实例后，调用close关闭

在打包运行的时候，你会发现占很大的内存，这是因为我们把所有的mint-ui都引入了，那我们按需引入不就好了