其實，我用vux組件的過程是這樣的，哇！太方便了！！功能好全！！太簡單了！！然後，就各種“跳坑”。以下排坑環節。

1、安裝vux：cnpm i -S vux; 比較順利吧。

2、導入組件：

import {ViewBox, XHeader, Tabbar, TabbarItem} from ‘vux‘
export default {
  name: ‘app‘,
  components: {ViewBox, XHeader, Tabbar, TabbarItem}
}

　　報錯！原因是vux內部樣式是用less寫的，所以要先安裝less-loader!

cnpm  install less less-loader --save

3、使用組件

  <view-box>
      <x-header :left-options="{backText:‘‘}" title="MACC3.0" :right-options="{showMore:‘true‘}" slot="header">
      </x-header>
      <div style="height:650px;">

      </div>
      <tabbar solt="bottom">
        <tabbar-item show-dot>
          <img slot="icon" src="./assets/home.png">
          <span slot="label">首頁</span>
        </tabbar-item>
        <tabbar-item badge="2">
          <img slot="icon" src="./assets/msg.png">
          <span slot="label">消息</span>
        </tabbar-item>
        <tabbar-item selected>
          <img slot="icon" src="./assets/new.png">
          <span slot="label">用戶</span>
        </tabbar-item>
      </tabbar>
    </view-box>

　　報錯！原因是vux內部有i18n語言包組件，需要配置：

cnpm install vux-loader

　　webpack.dev.config中加入：

var VuxLoader=require(‘vux-loader‘)
baseWebpackConfig=VuxLoader.merge(baseWebpackConfig,{plugins:[‘vux-ui‘]})

　　view-box 頁面容器，應該height:100%,所以，它的父級html, body, #app的height：100%；

可以導入vux的重置樣式文件：

 @import ‘~vux/src/styles/reset.less‘;

　　最後，是不是感覺還是不對勁兒，手機端！index.html 中加入：

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

vux 組件打造手機端項目