移動端UI庫對比 vant mint-ui vux cube-ui

基於vuecli3 構建的項目（已引入vue  vue-router  vuex），對比vant mint-ui  vux cube-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：全局引入 直接使用即可

<mt-checklist
  title="checkbox list"
  v-model="value"
  :options="['optionA', 'optionB', 'optionC']">
</mt-checklist>

  B：按需引入

//js中
import { Radio, Checklist } from 'mint-ui'  

//html中
<checklist
    :max="2"
    v-model="answerOne"
    :options="optionsOne"
>
</checklist>

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：全局引入 直接使用即可

<van-checkbox-group v-model="result">
  <van-checkbox name="a">復選框 a</van-checkbox>
  <van-checkbox name="b">復選框 b</van-checkbox>
</van-checkbox-group>

  B：按需引入

import { RadioGroup, Radio, CheckboxGroup, Checkbox } from 'vant'

<checkbox-group v-model="answerOne" :max="2">
      <checkbox :key="index" :disabled="item.disabled"  v-for=" 
(item,index) in optionsOne">
            {{item.label}}
        </checkbox>
</checkbox-group>

4 全局引入和按需引入包體大小對比

  

 

三 ：vux  vux暫時不支持vuecli3.0的腳手架，此文暫時沒有加入對比，但是若是webpack較好的人可以嘗試一下

四：cube-ui由滴滴 WebApp 前端架構組開發和維護。cube-ui 也支持3.0的vuecli ，詳細信息如下官網；

https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start 

 

對比總結：

1 mint-ui 近幾年好像都沒有維護和更新，組件遇到問題很難被解決，比如自己遇到了問題，多選框使用max，2.2.13版本存在bug；個人建議若后期迭代等很多建議可以選擇其他框架；

2 vant商場類項目首選；

3 vux 暫時不支持vuecli3.0，但是可以使用webpack自己配置；

4 cube-ui 滴滴開發和維護的，暫時還沒接觸 ，稍后更新；

未完待續...