vant

安装ui框架

cnpm i vant -S
//npm install vant --save --registry=https://registry.npm.taobao.org
//npm用淘宝源比直接cnpm更安全&&但是体验感是真的差！感觉加了淘宝源也没啥效果！

全局引入 懒人方法

在mainjs中配置

import Vant from 'vant'
import 'vant/lib/index.css';
Vue.use(Vant);

在组件中直接使用，不需要import组件了！

<van-button type="primary">按钮</van-button>

按需加载

将刚刚在mainjs中vant的设置删除

安装babel-plugin-import实现按需加载

npm i babel-plugin-import -D --registry=https://registry.npm.taobao.org

设置.babelrc ["import",{"libraryName":"vant","style":true}]

{
  "plugins": [
		"transform-vue-jsx", 
		"transform-runtime",
		["import",{"libraryName":"vant","style":true}]
		]
}

//mainjs
import {Icon,Button} from 'vant'

Vue.use(Icon)
   .use(Button)

完成这些配置后也可以在vue文件中直接使用

部分组件运用

• Row Col 24格分布

<van-row>
	<van-col span="3">
		<img :src="locationIcon" width="80%" class="location-icon"/>
	</van-col>
	<van-col span="16">
		<input type="text" class="search-input" />
	</van-col>
	<van-col span="5">
		<van-button size="mini">查找</van-button>
	</van-col>
</van-row>

• 懒加载 Lazyload

 <img v-lazy="adBanner" width="100%" />

• 底部导航

<van-tabbar v-model="active" @change="changeTabbar(active)">
	<van-tabbar-item icon="shop">首页</van-tabbar-item>
	<van-tabbar-item icon="records">列表</van-tabbar-item>
	<van-tabbar-item icon="cart">购物车</van-tabbar-item>
	<van-tabbar-item icon="contact">会员中心</van-tabbar-item>
</van-tabbar>
//active是显示第几个变色