Vue学习之旅Part18：Vue组件库Mint UI的介绍及使用(结合Webpack)

一、简介

Mint UI是一个基于Vue.js的移动端组件库

若对组件的概念不太了解 请参看本人的另一篇博客：Vue学习之旅Part8：Vue全局组件和私有组件的创建及组件切换动画

Mint UI和Bootstrap不一样 Bootstrap并不是一个真正的组件库 而是类似于代码片段
而Mint-UI是真正的组件库 是使用 Vue 技术封装的成套组件 可无缝和VUE项目进行集成开发 且只适用于Vue项目

二、使用

安装

1.x版本的Vue安装时需指定Mint UI的版本

# Vue 1.x
npm install mint-ui@1 -S

# Vue 2.0
npm install mint-ui -S

引入

Mint UI的引入方式分为两种：
可引入全部组件 使用会较为方便 但占用内存较大
还可按需引入部分的组件 节省占用的内存
(注：按需导入的使用方式请参看我的另一篇博客：在Vue中使用babel-plugin-component插件以实现按需导入Mint UI的组件)

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

// 按需引入部分组件
import {
    组件名 } from 'mint-ui';
Vue.component(组件名);
Vue.component(组件名.name, 组件名);

Mint UI的组件分为两种：CSS组件 和 JS组件

1、CSS组件 - 以Button为例

CSS组件有很多 按钮(button)只是其中之一
CSS组件的特点是只要全局引入了Mint UI的组件 即可在页面中以标签的形式直接使用

main.js：

// 导入Mint UI所有组件
import MintUI from "mint-ui"
// 导入Mint UI的样式(前面可省略node_modules目录)
import "mint-ui/lib/style.css"
// 手动安装Mint UI到Vue中
Vue.use(MintUI)

App.vue：
按钮组件的默认标签名为<mt-button>

<template>
    <div>
        <mt-button type="danger" size="large">button</mt-button>

        <mt-button disabled>disabled</mt-button>
        <mt-button plain>plain</mt-button>

        <mt-button icon