关于MINT-UI组件库的安装与使用

Mint-UI是是一个基于 Vue.js 的移动端组件库，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
优点：

• 高效
  可以快速构建出风格统一的页面，提升开发效率。
• 体验度高
  Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
• 轻量化
  依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。
  目前已经兼容vue2.0，放心使用
  安利过后，开始进入正题，快速开始

1、安装

根据之前的开发环境，打开项目，打开终端，选择2.0安装命令

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

安装成功如下图：

image.png

2、引入

• 方式一：引入全部组件
  如果你的项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。当然也省时省力
  找到src / main.js 文件
  在原来基础上添加

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

• 方式二：按需引入
  如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。
  例如：需要引入 Button 组件，
  在src / main.js中：

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

3、使用

在我们的.vue文件中，简单添加几个组件测试一下，例如：

<template>
  <div class="home">
    <mt-button type="default">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
    <h1>home</h1>
  </div>
</template>

命令运行 npm run dev

image.png

4、优化

问题：引入mintUI时都要单独引入相应的 CSS 文件。当使用按需引入的方法引入多个组件时，非常不方便。

解决：使用babel-plugin-component插件。

• 安装

npm i babel-plugin-component -D

在跟目录下有个 .babelrc 文件

• 配置

 "plugins": ["transform-runtime",
    ["component",
      { 
        "libraryName": "mint-ui", 
        "style": true 
      } 
  ]],

⚠️ 注意：
代码结构如下：

{
  "presets": [
    ["env", {
      "modules": false,
      ......
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",
    ["component",
      { 
        "libraryName": "mint-ui", 
        "style": true 
      } 
  ]],
  "env": {
    .......
  }
}

可能每个人生成的文件中，细节不太一样，看清楚结构，配置相应的属性，如果配错了，看看上述代码结构，是不是放错位置或者，少写或多写了标点符号

现在我们可以简化一下之前的引入代码

• 方法一中

import MintUI from 'mint-ui';
Vue.use(MintUI);

• 方法二中

import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

这时插件会自动引入相应的 CSS 文件。
运行效果和之前一样就是成功了，可以开始写漂亮的界面了