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

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

3、特性介绍

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

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实现一个轮播图组件。

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）运行项目测试效果：