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

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

2、项目官网：http://mint-ui.github.io/#!/zh-cn
3、w3cshool教程：
[wailian]https://www.w3cschool.cn/mintui[/wailian]

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

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

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）引入全部组件

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

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自动切换，代码如下：

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

4）运行项目测试效果：

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问