第八，学习less和reset.css的引用 完成首页活动、商品推荐模块。

第七，完成了vue轮播图的使用，接下来完成首页的活动，商品模块

一，less的引用

使用方法和介绍     https://www.jianshu.com/p/bf641d9d979a

①首先安装less，cmd进入项目目录，输入命令

$ cnpm install less less-roader  --save-dev。

②安装完成之后就可以使用了，在<style>lang 属性定义就可以。

二，reset.css的引用

①下载地址  https://cssreset.com/ 然后把下载的文件复制到src文件下。

②然后再App.vue中引入：

③测试是否引入成功，例如<h1>的margin为零了。

三，新建活动、商品推荐组件

（1）制作活动推荐组件---activity.vue

①进入conponents目录，新建活动推荐组件---activity.vue

搭建好组件的结构

搭建<template>的结构

<style>内容：

<style lang="less" scoped>
  .activity {
    background: #eee;
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: gray;
      border-bottom: 1px solid #000;
      background: #fff;
    }
    .content {
      .content_item {
        background: #fff;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 150px;
        }
      }
      .name {
        font-size: 15px;
        color: #000;
        margin-bottom: 5px;
      }
      .desc {
        font-size: 13px;
        color: #000;
      }
    }
  }
</style>

<script>内容：

②此时组件activity.vue已经完成了,去使用它

在view目录找到home.vue文件，在这里引用activity.vue组件。

③现在去浏览器看看效果：

（2）制作商品推荐组件---recommend.vue组件（具体方法和制作activity.vue组件类似）

<template>结构：

<script>内容：

css设置：

<style lang="less" scoped>
.recommend {
  background: #eee;
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: gray;
    border-bottom: 1px solid #000;
    background: #fff;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .content_item {
      background: #fff;
      margin-bottom: 5px;
      width: 180px;
      img {
        width: 100%;
        height: 200px;
      }
      .name {
        padding: 0 5px;
        font-size: 15px;
      }
      .desc {
        padding: 0 5px;
        overflow: hidden;
        font-size: 13px;
        .price {
          color: red;
        }
        .price_pre {
          color: #8e8e8e;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>

最后在home使用，方法和前面一样。

--------------------------------------------------------------------------------------------

最后项目运行的效果：

总结

具体的使用方法

https://www.cnblogs.com/xiaofenguo/p/6549728.html

https://www.w3cplus.com/vue/v-for.html

在制作组件recommend.vue的时候，css部分设置了flex布局：

flex布局的使用：

http://www.runoob.com/w3cnote/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

最后，项目源代码：https://github.com/LVQINGDONG/learn_vue_makestore