vue组件开发——part1

vue组件化开发，配合vue组件库vux，使用组件库有好处也有不好的地方。好处是有些组件可以直接拿来用，如Toast、Alert提示等，坏处是可定制性差，很多还是需要自己重新覆盖样式，但是这样做有时候效果也不好。

vux之前有看过官网的介绍，但是没有用，先前写无忧微贷APP的时候用的是饿了么的mint-ui组件，但是这个组件就我个人感觉不是很好，所以这次选择了vux，而且vux可以根据你的需要引入相应的组件，不必要引入整个。其实页面的样式什么的我都已经写好，引入组件库只是为了更加方便的提示弹框、滚动之类的。底部导航栏中本来想用vux的tabbar组件，写在页面上看了效果，还是放弃了，不是说这个组件不好，一方面是我还没摸熟vux，另一方面是我已经把底部导航的样式写好了，想直接用自己写的一套。代码如下：

<div class="nav-bar">
<ul class="clearfix" id="nav">
<li :class="{active: order_active}" @click="change('order')">
<i class="icon-1"></i>
<span>订单</span>
</li>
<li :class="{active: account_active}" @click="change('account')">
<i class="icon-2"></i>
<span>我的</span>
</li>
</ul>
</div>

路由跳转方面因为切换路由时需要高亮显示当前tab，所以用了两个class判断，写的时候感觉这是个很笨的方法，但是暂时没想到更好的办法实现，只能先这样写着，等想到再把这块改了，代码如下：

change(val){
this.curView = val;
this.$router.push('/' + val);
if(val == 'order'){
this.order_active = true;
this.account_active = false;
}else{
this.order_active = false;
this.account_active = true;
}
}

PS：vux是中的css是用less写的，但是我习惯用sass，所以项目中用到的是scss。项目后期会不定期更新