Mint-Ui安装及使用办法

简介

Mint-Ui是基于vue.js的组件库。

一、本地部署Mint-Ui官方文档

github 仓库地址

点击Download Zip下载（注意：不要git clone）
使用visual code 打开，打开终端，cnpm i 既可。
若使用npm或者yarn ，请先下载：npm install chromedriver --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
再安装。

npm run dev

二、使用

在webpack构建好项目中：

cnpm i mint-ui -S

引入 Mint-Ui

完全引入：

//在入口文件中引入以下内容
import Vue from 'vue'// 导入所有的 MIntUI 组件
// 导入 Mint-UI
import MintUI from 'mint-ui' //把所有的组件都导入进来
// 这里 可以省略 node_modules 这一层目录
import 'mint-ui/lib/style.css'
// 将 MintUI 安装到 Vue 中
Vue.use(MintUI) // 把所有的组件，注册为全局的组件
// 导入 app 组件
import app from './App.vue'var vm=new Vue({
    el: '#app',components: {
     App }
})

在app.vue中直接用

<template><div><h1>这是 App 组件</h1><!-- 为什么这里叫做 mt-button 的 button 直接就能用 --><mt-button type="danger" icon="more" @click="show">default</mt-button><mt-button type="danger" size="large" plain>default</mt-button><mt-button type="danger" size="small" disabled>default</mt-button><button type="button" class="mui-btn mui-btn-royal">紫色</button><!-- <mybtn type="primary">12345</mybtn> --><router-link to="/account">Account</router-link><router-link to="/goodslist">Goodslist</router-link><router-view></router-view></div>
</template><script>export default {data() {return {toastInstanse: null};},created() {this.getList();},methods: {getList() {// 模拟获取列表的 一个 AJax 方法// 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据this.show();setTimeout(() => {//  当 3 秒过后，数据获取回来了，要把 Toast 移除this.toastInstanse.close();}, 3000);},show() {// Toast("提示信息");this.toastInstanse = Toast({message: "这是消息",duration: -1, // 如果是 -1 则弹出之后不消失position: "top",iconClass: "glyphicon glyphicon-heart", // 设置 图标的类className: "mytoast" // 自定义Toast的样式，需要自己提供一个类名});}}
};
</script><style></style>

按需导入
css components的按需导入在入口文件中导入，在app.vue中直接使用

//main.js中
import Vue from 'vue'// 按需导入 Mint-UI组件
import {
     Button } from 'mint-ui'
// 使用 Vue.component 注册 按钮组件
Vue.component(Button.name, Button)
// console.log(Button.name)

js components的按需导入在app.vue中的script部分，然后使用

// 按需导入 Toast 组件
import { Toast } from "mint-ui";