Eighth, learn the reference of less and reset.css to complete the home page activity and product recommendation module.

Seventh, completed the use of the vue carousel, and then completed the activities on the home page, the product module

One, less quote

Usage and introduction https://www.jianshu.com/p/bf641d9d979a

① First install less, cmd enter the project directory, enter the command

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

②It can be used after installation, just define it in the <style>lang attribute.

Second, the reference of reset.css

Some of today’s popular browsers understand the css specification in their own way, which will result in the fact that only the browser’s interpretation of css conflicts with the designer’s css definition, making the appearance of the web page in some browsers The download can be displayed correctly according to the designer's idea. However, some browsers do not display as the designer wants, which leads to browser compatibility issues. Therefore, by resetting the css property of the button tag, and then defining it uniformly, the same display effect can be produced.

The function of css reset is to make the css style of each browser have a unified benchmark, and this benchmark is more "reset"!

①Download the URL  https://cssreset.com/ and copy the downloaded file to the src file.

② Then introduce in App.vue:

③Test whether the introduction is successful, for example, the margin of <h1> is zero.

3. New activities and product recommendation components

(1) Make activity recommendation component ---activity.vue

①Enter the conponents directory and create a new activity recommendation component---activity.vue

Build the structure of the components

Build the structure of <template>

<style>Content:

<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>Content:

②At this time the component activity.vue has been completed, go to use it

Find the home.vue file in the view directory and reference the activity.vue component here.

③Now go to the browser to see the effect:

(2) Make product recommendation component ---recommend.vue component (the specific method is similar to that of activity.vue component)

<template> structure:

<script>Content:

css settings:

<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>

Finally, use it at home, the method is the same as before.

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

The effect of the final project operation:

       

to sum up

The v-for command was used to render the list when making the component

  

Specific usage

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

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

When making the component recommend.vue, the flex layout was set in the css part:

The use of flex layout:

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