1、Mint ui介绍
Mint UI 是饿了么团队开源的一款基于 Vue.js 的UI组件库（主要是针对移动端） Mint UI中文官方教程 Mint UI其它中文版教程 Mint UI Github地址 特性： （1）、Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。 （2）、按需加载组件，可以加载声明过的组件，不必要引入全部的UI组件，需要用什么就选择性的用什么，这样可以减小我们项目的体积，加快加载速度。 （3）、在移动端渲染性能高，体验流畅
2、Mint ui安装和配置
进入根目录 npm i mint-ui -S
1）全部引入mint-ui
在main.js中全部引入mint-ui
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
2）vue2.0按需引入mint-ui，引入需要的组件，可以减少项目大小
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。 先安装 babel-plugin-component npm install babel-plugin-component -D 然后，将 .babelrc 修改为：
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx",
"transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
按照文档上配置，会报错 在main.js中全部引入部分mint-ui组件，比如轮播图
import {Swipe, SwipeItem} from 'mint-ui'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
3、Mint ui使用
1）实现消息提示
采用全部引入 import { MessageBox } from 'mint-ui' MessageBox('提示', '操作成功')
2）实现索引
在组件中加入
3）实现轮播图
记得要给轮播图一个高度
4）操作表
按照文档内容是做不出来的，需要到github上下载demo 将action-sheet.vue复制到项目中 在组件中导入