여덟째, less 및 reset.css에 대한 참조를 학습하여 홈 페이지 활동 및 제품 추천 모듈을 완료하십시오.

일곱째, vue carousel 사용 완료 후 홈페이지, 제품 모듈 활동 완료

하나 더 적은 견적

사용법 및 소개 https://www.jianshu.com/p/bf641d9d979a

① 먼저 덜 설치하고 cmd를 프로젝트 디렉토리에 입력하고 명령을 입력하십시오.

$ cnpm 덜 도로 설치 --save-dev。

② 설치 후 사용할 수 있으며 <style> lang 속성에 정의하면됩니다.

둘째, reset.css의 참조

오늘날 인기있는 일부 브라우저는 CSS 사양을 고유 한 방식으로 이해하므로 브라우저의 CSS 해석 만 디자이너의 CSS 정의와 충돌하여 일부 브라우저에서 웹 페이지가 표시됨 다운로드가 올바르게 표시 될 수 있습니다. 그러나 일부 브라우저는 디자이너가 원하는대로 표시되지 않아 브라우저 호환성 문제가 발생합니다. 따라서 button 태그의 css 속성을 재설정 한 다음 균일하게 정의하면 동일한 표시 효과를 얻을 수 있습니다.

CSS 재설정의 기능은 각 브라우저의 CSS 스타일이 통합 된 벤치 마크를 갖도록하는 것입니다.이 벤치 마크는 더 "재설정"됩니다!

①URL https://cssreset.com/ 을 다운로드하고 다운로드 한 파일을 src 파일에 복사합니다.

②App.vue에서 소개합니다.

③ 도입 성공 여부를 테스트합니다. 예를 들어 <h1>의 마진이 0입니다.

3. 새로운 활동 및 제품 추천 구성 요소

(1) 활동 추천 구성 요소 만들기 --- activity.vue

① conponents 디렉토리를 입력하고 새로운 활동 추천 구성 요소 --activity.vue를 만듭니다.

구성 요소의 구조 구축

<템플릿> 구조 구축

<스타일> 내용 :

<style lang = "less"scoped> 
  .activity { 
    background : #eee; 
    .title { 
      너비 : 100 %; 
      높이 : 50px; 
      줄 높이 : 50px; 
      텍스트 정렬 : 가운데; 
      색상 : 회색; 
      border-bottom : 1px 단색 # 000; 
      배경 : #fff; 
    } 
    .content { 
      .content_item { 
        배경 : #fff; 
        margin-bottom : 10px; 
        img { 
          너비 : 100 %; 
          높이 : 150px; 
        } 
      } 
      .name { 
        글꼴 크기 : 15px; 
        색상 : # 000; 
        margin-bottom : 5px; 
      }
      .desc { 
        글꼴 크기 : 13px; 
        색상 : # 000; 
      } 
    } 
  } 
</ 스타일>

<script> 내용 :

② 이때 activity.vue 컴포넌트가 완성 되었으니 사용하러 가세요

보기 디렉토리에서 home.vue 파일을 찾고 여기에서 activity.vue 구성 요소를 참조하십시오.

③ 이제 브라우저로 이동하여 효과를 확인하십시오.

(2) 제품 추천 구성 요소 만들기 --- recommend.vue 구성 요소 (구체적인 방법은 activity.vue 구성 요소와 유사 함)

<템플릿> 구조 :

<script> 내용 :

css 설정 :

<style lang = "less"scoped> 
.recommend { 
  배경 : #eee; 
  .title { 
    너비 : 100 %; 
    높이 : 50px; 
    줄 높이 : 50px; 
    텍스트 정렬 : 가운데; 
    색상 : 회색; 
    border-bottom : 1px 단색 # 000; 
    배경 : #fff; 
  } 
  .content { 
    디스플레이 : flex; 
    플렉스 방향 : 행; 
    플렉스 랩 : 랩; 
    정당화 내용 : 공백 사이; 
    .content_item { 
      배경 : #fff; 
      margin-bottom : 5px; 
      너비 : 180px; 
      img { 
        너비 : 100 %; 
        높이 : 200px; 
      }  
      .name {
        padding : 0 5px;
        글꼴 크기 : 15px; 
      } 
      .desc { 
        패딩 : 0 5px; 
        오버플로 : 숨김; 
        글꼴 크기 : 13px; 
        .price { 
          색상 : 빨간색; 
        } 
        .price_pre { 
          색상 : # 8e8e8e; 
          텍스트 장식 : 라인 스루; 
        } 
      } 
    } 
  } 
} 
</ style>

마지막으로 집에서 사용하는 방법은 이전과 동일합니다.

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

최종 프로젝트 운영의 효과 :

요약하자면

v-for 명령은 구성 요소를 만들 때 목록을 렌더링하는 데 사용되었습니다.

특정 사용법

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

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

구성 요소 권장 .vue를 만들 때 플렉스 레이아웃은 CSS 부분에 설정되었습니다.

플렉스 레이아웃 사용 :

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