商城项目商品列表页的渲染实现(含动图)

有了v-for循环，渲染商品列表简直不要太方便了，以前写一个商品列表页要一天，现在只需要几分钟，除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据，它可使前端工程师独立于后端进行开发，在前端可以先行自己测试，之后再与后端对接联调，可以节省不少的时间。

所谓孰能生巧，vue构建项目联系的多了以后也可随意的封装组件，抽离组件。用起来得心应手。
实现效果动图如下：

商品列表页的实现步骤如下：

1.新建商品列表组件

新建商品列表组件goodsList.vue文件，在首页点击查看商品时，跳转到商品列表。这里使用router-link，绑定跳转后的路径为商品列表页的路径/goods。如下：
index.vue文件：

2.商品列表组件的实现

1. 导入头部和尾部组件
   商品列表页与首页共用header部分和footer部分，因为header部分和footer部分我是单独的组件，所以这里只需要引入header部分和footer部分的组件即可。如下：
   
   声明组件
   
   使用组件
   

2. 中间部分商品列表的实现
   商品列表部分布局由nav导航部分和一些商品图标和商品信息简单构成，还可以根据需要实现更为复杂的需求。

   2.1 没有采用mock数据模拟，所以直接定义了一个数据列表，通过v-for循环从列表中读取数据，进而渲染到页面。定义的数据列表如下：

   return {
        
   	count: 0,
   	goodsList: [
   	    {
        
   	        src: require('../assets/goods/mi6.jpg'),
   	        		productName: '小米6',
   	        		productId: 10001,
   	        		prodcutPrice: 1998,
   	    },
   	    {
        
   	     	src: require('../assets/goods/miS2.jpg'),
   	        		productName: '红米S2',
   	        		productId: