《vue+vant+node+mongoDB+koa2》电商项目实战连载（4）

<!-- 第四节，Vant实现首页搜索模块 -->

使用<van-row>和<van-col >来快速的创建一个搜索条的html的结构出来，

<van-row>

<van-col span="16">

<input type="text" class="searchInput" />

</van-col>

<van-col span="4">

<van-button size="small">搜索</van-button>

</van-col>

<van-col span="4">

<img :src="iconPic" width="50%" />

</van-col>

</van-row>

<!-- icon图标从哪里来 -->

icon以及相关的图片、图标，我们是使用阿里的图标网站，

http://www.iconfont.cn

这个网站需要注册之后才能使用，

<!-- 如何引入本地图片 -->

引入 图片有很多方式，

在这个例子里，使用require，

iconPic : require('../../assets/images/icon.png')

然后在template中，

<img :src="iconPic" width="50%" />

就ok了。