标签：slot plugin content 页面 img rip badge sel res
其实，我用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">
标签：slot plugin content 页面 img rip badge sel res
原文地址：http://www.cnblogs.com/caolidan/p/7269453.html
