学习 NodeJS 6-商品列表模块实现

6 商品列表模块实现

6.1 商品列表组件拆分

• Header组件

• Footer组件

• 面包屑组件

6.2 商品列表数据渲染实现

模拟mock数据，加载商品列表信息

坑：新的vue-cli创建应用已经没有dev-server.js了，已经和webpack.dev.conf.js合并了，需要在如下操作去实现：

const express = require("express")
const app = express();
const goodsData = require("./../mock/goods.json");
var router = express.Router();
app.use('/api',router);

devServer: {
  before(app){
    app.get("/api/goods", (req, res)=> {
      res.json(goodsData);
    })
  },
  ……
}

6.3 实现图片懒加载

使用vue-lazyload插件：

首先安装插件：npm i vue-lazyload --save，

然后在main.js引入插件并初始化：

import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

然后将需要懒加载的图片上添加v-lazy绑定：