基于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