03——vue企业级电商系统(商城首页)

商城首页

swiper轮播插件的使用
引用sass，定义min-width，统一全局颜色变量。
好用的设计稿看图网站：lanhuapp.com

sass用法：（复用）

<style lang="scss">
// 在此处引用顺序很重要，而且要加分号；和@，还有lang="scss"

NavHeader.vue的style中导入@import '../assets/scss/mixin.scss';

scss里面写函数，方便调用

@import '../assets/scss/mixin.scss';
.container{
        @include flex();
 }

mixin.scss

//flex布局复用
@mixin flex($hov:space-between,$col:center){
  display: flex;
  justify-content: $hov;
  align-items: $col;
}

target="_blank"打开新窗口

<a href="" target="_blank"></a>

商品元素间加竖线

 				&:before{
                  content: ' ';
                  position: absolute;
                  top: 28px;
                  right: 0;
                  border-left: 1px solid $colorF;
                  height: 100px;
                  width:1px;
                }
                &:last-child:before{ //去掉最后一个子元素的竖线
                  display: none;
                }

前端技术

Vue	前端框架	https://vuejs.org/
Vue-router	路由框架	https://router.vuejs.org/
Vuex	全局状态管理框架	https://vuex.vuejs.org/
Element	前端UI框架	https://element.eleme.io/
Axios	前端HTTP框架	https://github.com/axios/axios
v-charts	基于Echarts的图表框架	https://v-charts.js.org/
Js-cookie	cookie管理工具	https://github.com/js-cookie/js-cookie
nprogress	进度条控件	https://github.com/rstacruz/nprogress

使用opacity：0.5 时会使字和背景都会变成半透明的

懒加载：
main.js

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad,{
  loading:'/imgs/loading-svg/loading-bars.svg' //用本地的svg图片替代待加载图片
})

要给图片加单引号，若不加则是表示变量，会报错

<img v-lazy="'/imgs/banner-1.png'">
<!-- 这种就不用加-->
<img v-lazy="item.img">  

向父组件传递方法

v-on:click="$emit('submit')"

 @submit="goToCart()"

接收父组件传来的参数

 props:{
    sureText:{  //接收到的参数，定义数据类型和默认值
      btnType:String,
      default:'确定'
    }
 }

如何在点击后跳转到另一页面

    goToCart () {
      this.$router.push('/cart')
    }

整体动画效果
添加<transition name="slide"> </transition>
然后会生成6个类：
slide-enter slide-enter-active slide-enter-to
slide-leave slide-leave-active slide-leave-to

  // 顺序也有要求，不然动画不成功
  &.slide-enter-active{
    top:0;
  }
  &.slide-leave-active{
    top:-100%;
  }
  &.slide-enter{
    top:-100%;
  }

.slide-enter要放在后面，否则退出时无动画
插槽slot的用法
vue4.0版本要用template包裹着，v-slot绑定相同的名字

<modal 
      title="提示" 
      sureText="查看购物车" 
      btnType="2"
      modalType="middle"
      :showModal="showModal"
      @submit="goToCart()"
      @cancel="showModal=false"
    >
      <template v-slot:body>
        <p>商品添加成功!</p>
      </template>
    </modal>

以下是Modal.vue
有很多地方写的比较精彩，插槽和按钮的类型选择判断。
这个对话框很值得借鉴！！！在以后的项目中尝试运用到自己的项目里。

<template>
  <transition name="slide">
    <div class="modal" v-show="showModal">
      <!-- 遮罩层 -->
      <div class="mask"></div>
      <!-- 弹窗 -->
      <div class="modal-dialog">
        <div class="modal-header">
          <span>{{title}}</span>
          <a href="javascript:;" class="icon-close" v-on:click="$emit('cancel')"></a>
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer">
          <a href="javascript:;" class="btn" v-if="btnType==1" v-on:click="$emit('submit')">{{sureText}}</a>
          <a href="javascript:;" class="btn" v-if="btnType==2" v-on:click="$emit('cancel')">{{cancelText}}</a>
          <div class="btn-group" v-if="btnType==3">
            <a href="javascript:;" class="btn" v-on:click="$emit('submit')">{{sureText}}</a>
            <a href="javascript:;" class="btn btn-default" v-on:click="$emit('cancel')">{{cancelText}}</a>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default{
  name:'modal',
  props:{
    //弹框类型：小small/中middle/大large/表单form
    modalType:{
      type:String,
      default:'form'
    },
    //弹框标题
    title:String,
    //按钮类型：1：确认按钮；2：取消按钮；3确定取消
    btnType:String,
    sureText:{
      btnType:String,
      default:'确定'
    },
    cancelText:{
      type:String,
      default:'取消'
    },
    showModal:Boolean
  }
}
</script>
<style lang="scss" scoped>

</style>