MintUI入门（1）——使用vue-cli集成Mint UI环境搭建步骤

一、初识Mint UI

1、Mint UI是由饿了么前端团队推出的一个基于 Vue.js 的移动端组件库，可以帮助我们快速开发移动端前台页面。

2、项目官网：http://mint-ui.github.io/#!/zh-cn
3、w3cshool教程：

Mint UI 中文文档_w3cschool

Mint UI
基于 Vue.js 的移动端组件库_来自Mint UI 中文文档，w3cschool编程狮。

3、特性介绍

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

二、vue-cli集成Mint UI

1、新建一个基于vue-cli的vue项目，名为mint-app

2、打开该项目终端，运行如下指令安装Mint UI

npm install mint-ui -S

以上指令适用于Vue2.x版本（我们目前基本都有2.x），如果是Vue1.x版本则用如下指令：

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

3、在main.js中引入Mint UI，有两种方式：
1）引入全部组件

import Vue from 'vue'
import App from './App.vue'
// 引入Mint全部组件
import Mint from 'mint-ui';
// 引入Mint样式
import 'mint-ui/lib/style.css'
// 安装Mint
Vue.use(Mint);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2）按需引入组件

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

一般我们全部引入即可。

三、Mint UI案例

接着上面安装好Mint UI后，接下来我们使用Mint UI实现一个轮播图组件。

1）在assets目录下新建一个images目录，并下载3张相同尺寸的图片放到images下，我这里从淘宝首页下载了3张，尺寸为520*280

2）在components目录下新建Banner.vue轮播图组件，4s自动切换，代码如下：

<template>
  <!-- 轮播图 :auto="4000"表示4秒切换-->
  <mt-swipe :auto="4000">
    <mt-swipe-item v-for="(item,index) in pics" :key="index">
      <img :src="item.url">
    </mt-swipe-item>
  </mt-swipe>
</template>
<script>
//导入图片 
import pic1 from '../assets/images/pic1.jpg';
import pic2 from '../assets/images/pic2.jpg';
import pic3 from '../assets/images/pic3.jpg';
export default {
  name:'Banner',
  data(){
      return{
          // 图片数组，图片如果不导入在这里使用require
          pics:[
              {url:pic1},
              {url:pic2},
              {url:pic3}
          ]
      }
  }
}
</script>
<style scoped>
.mint-swipe {
  height: 200px;
}
.mint-swipe img {
  width: 100%;
}
</style>

3）将Banner.vue挂在到App.vue中并使用，App.vue如下：

<template>
  <div id="app">
    <Banner></Banner>
  </div>
</template>

<script>
import Banner from './components/Banner.vue'

export default {
  name: 'app',
  components: {
    Banner
  }
}
</script>

<style>
</style>

4）运行项目测试效果：