Vux components to build mobile-phone projects

In fact, I use the Vux component of the process is like this, wow! It's so convenient!! function Good whole!! It's too easy!! Then, on the various "jumping pits". The following pit links.

1, installation vux:cnpm i-s Vux; It's better.

2. Import components:

Import {ViewBox, Xheader, Tabbar, Tabbaritem} from ' Vux '
Export Default {
  Name: ' App ',
  Components: {ViewBox, Xheader, Tabbar, Tabbaritem}
}

Error! The reason is that Vux internal styles are written in less, so install less-loader! first

CNPM  Install less less-loader--save

3. Using components

  <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>           <span slot= "label" > Home </span>        </tabbar-item>        < Tabbar-item badge= "2" >                    <span slot= "label" > Message < /SPAN>        </tabbar-item>        <tabbar-item selected>                    <span slot=" label "> Users </span>        </tabbar-item>      </tabbar>    </view-box>

Error! The reason is that Vux has a i18n language pack component inside it and needs to be configured:

CNPM Install Vux-loader

Webpack.dev.config Add:

var vuxloader=require (' Vux-loader ') basewebpackconfig=vuxloader.merge (basewebpackconfig,{plugins:[' Vux-ui '})

View-box page container, should be height:100%, so, it's parent HTML, body, #app的height: 100%;

You can import the reset style file for Vux:

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

Finally, is not feeling or not, mobile phone side! index.html Add:

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

　　

Vux components to build mobile-phone projects