En octavo lugar, aprenda la referencia de less y reset.css para completar la actividad de la página de inicio y el módulo de recomendación de productos.

En séptimo lugar, completó el uso del carrusel vue y luego completó las actividades en la página de inicio, el módulo de producto

Una cita menos

Uso e introducción https://www.jianshu.com/p/bf641d9d979a

① Primero instale menos, cmd ingrese al directorio del proyecto, ingrese el comando

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

②Se puede usar después de la instalación, simplemente defínalo en el atributo <style> lang.

En segundo lugar, la referencia de reset.css

Algunos de los navegadores más populares de la actualidad entienden la especificación css a su manera, lo que resultará en el hecho de que solo la interpretación del navegador de css entra en conflicto con la definición de css del diseñador, lo que hace que la página web aparezca en algunos navegadores. La descarga se puede mostrar correctamente según la idea del diseñador, sin embargo, algunos navegadores no se muestran como el diseñador desea, lo que genera problemas de compatibilidad con el navegador. Por lo tanto, restableciendo la propiedad css de la etiqueta del botón y luego definiéndola de manera uniforme, se puede producir el mismo efecto de visualización.

La función de restablecer css es hacer que el estilo CSS de cada navegador tenga un punto de referencia unificado, ¡y este punto de referencia es más "restablecer"!

①Descargue la URL  https://cssreset.com/ y copie el archivo descargado al archivo src.

②A continuación, introduzca en App.vue:

③ Pruebe si la introducción es exitosa, por ejemplo, el margen de <h1> es cero.

3. Nuevas actividades y componentes de recomendación de productos

(1) Hacer el componente de recomendación de actividad --- activity.vue

① Ingrese al directorio de componentes y cree un nuevo componente de recomendación de actividad --- activity.vue

Construye la estructura de los componentes

Construye la estructura de <template>

<style> Contenido:

<style lang = "less" 
  scoped > .activity { 
    background: #eee; 
    .title { 
      ancho: 100%; 
      altura: 50px; 
      altura de línea: 50px; 
      alineación de texto: centro; 
      color gris; 
      borde inferior: 1px sólido # 000; 
      fondo: #fff; 
    } 
    .content { 
      .content_item { 
        background: #fff; 
        margen inferior: 10px; 
        img { 
          ancho: 100%; 
          altura: 150px; 
        } 
      } 
      .name { 
        tamaño de fuente: 15px; 
        color: # 000; 
        margen inferior: 5px;
      }
      .desc { 
        tamaño de fuente: 13px; 
        color: # 000; 
      } 
    } 
  } 
</style>

<script> Contenido:

②En este momento el componente activity.vue se ha completado, vaya a usarlo

Busque el archivo home.vue en el directorio de vista y haga referencia al componente activity.vue aquí.

③Ahora ve al navegador para ver el efecto:

(2) Hacer el componente de recomendación de producto --- componente de recomendar.vue (el método específico es similar al del componente de activity.vue)

<template> estructura:

<script> Contenido:

configuración de CSS:

<style lang = "less" 
scoped > .recommend { 
  background: #eee; 
  .title { 
    ancho: 100%; 
    altura: 50px; 
    altura de línea: 50px; 
    alineación de texto: centro; 
    color gris; 
    borde inferior: 1px sólido # 000; 
    fondo: #fff; 
  } 
  .content { 
    display: flex; 
    dirección flexible: fila; 
    envoltura flexible: envoltura; 
    justificar-contenido: espacio-entre; 
    .content_item { 
      antecedentes: #fff; 
      margen inferior: 5px; 
      ancho: 180px; 
      img { 
        ancho: 100%; 
        altura: 200px; 
      } 
      .name {
        relleno: 0 5px; 
        tamaño de fuente: 15px; 
      } 
      .desc { 
        relleno: 0 5px; 
        desbordamiento: oculto; 
        tamaño de fuente: 13px; 
        .price { 
          color: rojo; 
        } 
        .price_pre { 
          color: # 8e8e8e; 
          decoración de texto: línea continua; 
        } 
      } 
    } 
  } 
} 
</style>

Finalmente úsalo en casa, el método es el mismo que antes.

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

El efecto de la operación final del proyecto:

       

para resumir

El comando v-for se usó para representar la lista al hacer el componente

  

Uso específico

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

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

Al hacer que el componente recomendara.vue, el diseño flexible se estableció en la parte css:

El uso de diseño flexible:

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