基于vuecli3 构建的项目，对比vant mint-ui实现同样功能，打包后体积大小；
一 mint-ui 是饿了么团队开发的基于vue.js的移动端UI库
1 安装：npm install --save-dev mint-ui
2 引入：
A：全局引入，在main.js中
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)
B：按需引入，使用babel-plugin-component
npm install --save-dev babel-plugin-component
在babel.config.js中配置：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['component', {
libraryName: 'mint-ui',
style: true
}]
]
}
3 直接在页面中引入需要的组件
A：全局引入 直接使用即可
title="checkbox list"
v-model="value"
:options="['optionA', 'optionB', 'optionC']">
B：按需引入
//js中
import{Radio,Checklist}from'mint-ui'
//html中
:max="2"
v-model="answerOne"
:options="optionsOne"
>
4 全局引入和按需引入包体大小对比
二 vant 有赞开源的一套基于vue2.0的Mobile组件库，当做商城类的项目时优选改组件
1安装：npm install --save-dev vant
2 引入：
A：全局引入，在main.js中
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
B：按需引入，使用babel-plugin-import
npm install --save-dev babel-plugin-import
在babel.config.js中配置
module.exports={
presets:[
'@vue/cli-plugin-babel/preset'
],
plugins:[
['import',{
libraryName:'vant',
libraryDirectory:'es',
style:true
},'vant']
]
}
3 直接在页面中引入需要的组件
A：全局引入 直接使用即可
复选框 a
复选框 b
B：按需引入
import{RadioGroup,Radio,CheckboxGroup,Checkbox}from'vant'
(item,index)inoptionsOne">
{{item.label}}
4 全局引入和按需引入包体大小对比
经对比，个人觉得相对mint-ui更加轻量，非商城类项目可以选择mint-ui，商城类项目优选vant
如果觉得《html mint ui 移动端UI库对比 vant mint-ui》对你有帮助，请点赞、收藏，并留下你的观点哦！
