Vue项目实战：首页实现

目录

1. Nav-Header组件

• 组件复用的一个技巧
• 通过 @mixin 简化代码
• 统一修改系统主题色
• 数据请求

2. 首页轮播功能实现

• 使用 vue-awesome-swiper 实现轮播图
• 首页轮播菜单实现
• Modal 弹窗动画 与 父子组件通信
• 懒加载

一. Nav-Header组件

（1）组件复用的一个技巧：

因为商场网站中多个页面共用了头部组件nav-header和底部组件nav-footer，而为了避免 每个需要这两个组件的页面中都需要单独引入组件，我们可以通过一个home页面来复用共用的组件。

• 在路由文件中：

	{
   
			path: '/',
            name: 'home',
            component:Home,
            redirect: '/index',
            children: [ //下面是需要头部和底部组件的页面
                {
   
                    path: '/index',
                    name: 'index',
                    component: Index,
                },
                {
   
                    path: '/product/:id',
                    name: 'product',
                    component: Product,
                },
                {
   
                    path: '/detail/:id',
                    name: 'detail',
                    component: Detail,
                }                
            ]
        },

• 在home.vue中：

<template>
    <div>
        home
        <nav-header></nav-header>
        <router-view></router-view>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
import NavHeader from './../components/NavHeader';
import NavFooter from './../components/NavFooter';
export default {
    
    name: 'nav-home',
    components: {
    
        NavHeader,
        NavFooter

    }
}
</script>

（2）通过@mixin简化代码

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使代码更加具有重复利用性，@mixin指令也同样能提高代码的重复使用率并简化你的代码。

• 在assets文件夹中创建一个scss文件夹。在scss文件夹中创建mixin.scss文件，在里面存放将会共用的代码：

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

@mixin bgImg($w:0, $h:0, $img:'', $size:contain) {
    display: inline-block;
    width: $w;
    height: $h;
    background:url($img) no-repeat center;
    background-size: $size;
    margin-right: 4px;
}

• 在用到mixin.scss里样式的文件NavHeader里，在<style>标签中引入mixin.scss文件并替换用到的css代码

<style lang="scss">
@import './../assets/scss/mixin.scss';
    .container{
            height: 112px;
		/*	display: flex;
        	justify-content: $hov;
        	 align-items: $col; */
            @include flex();
    }
        .my-cart{
            width: 100px;
            background-color: #FF6600;
            text-align: center;
            color: #ffffff;
            .icon-cart{
           /*
               display: inline-block;
  			   width: 16px;
   		       height: 12px;
  		  	   background:url('/imgs/icon-cart-checked.png') no-repeat center;
 			   background-size: contain;
 			   margin-right: 4px;
                */
                @include bgImg(16px, 12px, '/imgs/icon-cart-checked.png');
                margin-right:4px;
            }
        }  
    
</style>

• @mixin学习资料：

Sass: @mixin指令介绍

Sass: @mixin 菜鸟教程

(3)统一修改系统主题色

• 在scss文件夹中加入文件config.scss文件，该文件定义了一些常规样式。

/*
  样式规范表
*/
$min-width:1226px;  //容器安全区域宽度

// 常规字体大小设置
$fontA:       80px; //产品站大标题
$fontB:       38px; //产品站标题
$fontC:       28px; //导航标题
$fontD:       26px; //产品站副标题
$fontE:       24px; 
$fontF:       22px;
$fontG:       20px; //用在较为重要的文字、操作按钮
$fontH:       18px; //用于大多数文字
$fontI:       16px; //用于辅助性文字
$fontJ:       14px; //用于一般文字
$fontK:       12px; //系统默认大小

// 常规配色设置
$colorA:      #FF6600 !default; //用于需要突出和强调的文字、按钮和icon
$colorB:      #333333 !default; //用于较为重要的文字信息、内页标题等
$colorC:      #666666 !default; //用于普通段落信息 引导词
$colorD:      #999999 !default; //用于辅助、此要的文字信息、普通按钮的描边
$colorE:      #cccccc !default; //用于特别弱的文字
$colorF:      #d7d7d7 !default; //用于列表分割线、标签秒变
$colorG:      #ffffff !default; //用于导航栏文字、按钮文字、白色背景
$colorH:      #e5e5e5 !default; //用于上下模块分割线
$colorI:      #000000 !default; //纯黑色背景，用于遮罩层
$colorJ:      #F5F5F5 !default; //弹框标题背景色
$colorK:      #FFFAF7 !default; //订单标题背景色

• 在需要用到常规样式的组件或页面中引入config.scss并使用样式：

<style lang="scss">
@import "./../assets/scss/config.scss";
          &:hover {
    
              color:$colorA;
          }
</style>    

(4) 数据请求

export default {
   
  name: "nav-header",
  data() {
   
    return {
   
      username: "jack",
      phoneList: []
    };
  },
  mounted() {
   
    this.getProductList();