013 mint-ui

一：概述

1.中文文档

　　https://mint-ui.github.io/#!/en

 

2.安装包

　　

 

 

二：mt-button的使用

　　主要是介绍css-component

1.程序

　　在App.vue下面写

　　

2.效果

　　

 

 

三：toast的使用

　　主要是介绍js component

1.需求说明一下

　　刷新进页面弹出提示框，然后等页面数据刷新结束之后，就自动关闭弹框

　　包括弹框图标，以及变色

 

2.新建一个app.css

　　用于图标变色

.mytoast i{
    color: aqua !important;
}

　　

3.使用bootstrap的图标

　　所以，需要引用包。同时，将新建的css引入

　　修改main.js如下：

// js的主要入口
console.log("ok")

import Vue from 'vue'

//引用vue-router，然后和vue产生关系
import VueRouter from 'vue-router'
Vue.use(VueRouter)

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

//bootstrap的样式
import 'bootstrap/dist/css/bootstrap.css'

import './css/app.css'

import app from './App.vue'
import router from './router.js'
var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    router
})

　　

4.App.vue代码如下

　　

5.效果

　　

 

 

四：按需导入

1.导包

　　

 

 

2.在.babelrc中修改

　　

 

 

3.引入需要的组件

　　main.js

// js的主要入口
console.log("ok")

import Vue from 'vue'

//引用vue-router，然后和vue产生关系
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//MintUI,这种是全部导入
// import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'
// Vue.use(MintUI)

//按需导入
import {Button} from 'mint-ui'
Vue.component(Button.name,Button)

//bootstrap的样式
import 'bootstrap/dist/css/bootstrap.css'

import './css/app.css'

import app from './App.vue'
import router from './router.js'
var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    router
})