MintUI组建学习心得

先创建一个项目。使用vue cli 脚手架。运行命令之前要装好node.js环境，这里就不讲了。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

根据提示创建好自己的项目，进入项目根目录继续引入MintUI。

npm i mint-ui -S

安装完成后，在自己项目里加入MintUI。

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
...
Vue.use(MintUI)

好了可以使用了，后边我们按照文档顺序一起试用每一个控件吧。

Toast 消息提示

<template>
    <div>
        <button @click="handleClick">提示信息</button>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default{
        name:'MyToast',
        components:{Toast},
        methods:{
            handleClick(){
                //返回toast的实例用于后续的控制
                let instance = Toast('我是提示信息!');
                //可以自行进行关闭调节关闭时间
                setTimeout(() => {
                    instance.close();
                }, 2000);
            }
        }
    }
</script>