《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了。