vue电商系统项目（未完成）

项目搭建

        目录结构设置

        基本插件介绍

项目中有轮播图片，需要懒加载插件,下载插件需要自己进行搜索认识

npm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save

router.js编写

        思路

在项目搭建开始，要先分析小米商城页面跳转的问题，思路是在一开始先进入home页面，进行路由重定向进入index页面，home是根路由，在home根路由的基础下进入index页面，product页面，detail页面。在接下来是cart,order页面，order页面基础下进入orderlist页面，orderpay页面，orderconfirm页面，alipay页面。根据这个思路我们就可以写routes.js代码。

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../pages/home.vue'
import Index from '../pages/index.vue'
import Product from '../pages/product.vue'
import Detail from '../pages/detail.vue'
// import Login from '../pages/login.vue'
import Cart from '../pages/cart.vue'
import Order from '../pages/order.vue'
import OrderList from '../pages/orderList.vue'
import OrderPay from '../pages/orderPay.vue'
import OrderConfirm from '../pages/orederConfirm.vue'
import Alipay from '../pages/alipay.vue'
Vue.use(Router)
export default new Router({
    routes:[{
            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,
                }
            ]
        },
        {
                // path:'/login',
                // name:'login',
                // component:Login,
                path:'/cart',
                name:'cart',
                component:Cart,
        },
        {
                path:'/order',
                name:'order',
                component:Order,
                children:[
        {
                            path:'orderList',
                            name:'order-list',
                            component:OrderList,
                        },
                        {
                            path:'orderPay',
                            name:'order-pay',
                            component:OrderPay,
                        },
                        {
                            path:'orderConfirm',
                            name:'order-confirm',
                            component:OrderConfirm,
                        },
                        {
                            path:'orderPay',
                            name:'order-pay',
                            component:OrderPay,
                        },
                        {
                            path:'alipay',
                            name:'alipay',
                            component:Alipay,
                        }
                    ]
            
        }
    ]
})

main.js编写

import Vue from 'vue'
import router from './router/router'
import App from './App.vue'

Vue.config.productionTip = false
new Vue({
    router,
    render:h => h(App),
}).$mount('#app')

路由重定向

home页面是空白的，没有内容，需要使用重定向在默认打开时自动跳转到首页。在router.js文件中，加入下面代码，

redirect:'/index',

各个组件的编写

        NavHeader.vue的编写

<template>
    <div>
        nav-header
    </div>
</template>
<script>
export default{
    name:'nav-header',

}
</script>

        NavFooter.vue的编写

<template>
    <div>
       nav-footer
    </div>
</template>
<script>
export default{
    name:'nav-footer',

}
</script>

 OrderHeader.vue的编写

<template>
    <div>
        order-header
    </div>
</template>
<script>
export default{
    name:'order-header',

}
</script>

        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.vue'
import NavFooter from '../components/NavFooter.vue'
    export default{
    name:'nav-home',
    components:{
        NavHeader,
        NavFooter
    }

    }
</script>

        index.vue的编写

<template>
    <div>
        index
        
    </div>
</template>
<script>
    export default{
    name:'mallIndex',
    }
</script>

         login.vue的编写

<template>
    <div>
        login
    </div>
</template>
<script>
    export default{
    name:'mallLogin',
    }
</script>

        detail.vue的编写

<template>
    <div>
        detail
    </div>
</template>
<script>
    export default{
    name:'mallDetail',
    }
</script>

product.vue的编写

<template>
    <div>
        product
    </div>
</template>
<script>
    export default{
    name:'mallProduct',
    }
</script>

cart.vue的编写

<template>
    <div>
        <order-header></order-header>
        <router-view></router-view>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
    import OrderHeader from '../components/OrderHeader.vue'
    import NavFooter from '../components/NavFooter.vue';
    export default{
        name:'mallCart',
        components:{
        OrderHeader,
        NavFooter
    }
}
</script>

order.vue的编写

<template>
    <div>
        <order-header></order-header>
        <router-view></router-view>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
    import OrderHeader from '../components/OrderHeader.vue'
    import NavFooter from '../components/NavFooter.vue';
    export default{
    name:'mallOrder',
    components:{
        OrderHeader,
        NavFooter
    }
    }
</script>

orderList.vue的编写 

<template>
    <div>
        <order-header></order-header>
        <router-view></router-view>
        <nav-footer></nav-footer>
    </div>
</template>
<script>
    import OrderHeader from '../components/OrderHeader.vue'
    import NavFooter from '../components/NavFooter.vue';
    export default{
    name:'mallOrder',
    components:{
        OrderHeader,
        NavFooter
    }
    }
</script>

orderPay.vue的编写

<template>
    <div>
        orderPay
    </div>
</template>
<script>
    export default{
    name:'orderPay',
    }
</script>

orderConfirm.vue的编写

<template>
    <div>
        orderConfirm
    </div>
</template>
<script>
    export default{
    name:'orderConfirm',
    }
</script>

        aliPay.vue的编写

<template>
    <div>
        alipay
        
    </div>
</template>
<script>
    export default{
    name:'aliPay',
    

    }
</script>

axios

在main.js处添加以下代码

import axios from 'axios'
import VueAxios from 'vue-axios'
//根据前端的跨域方式做调整
axios.defaults.baseURl = '/api';
axios.defaults.timeout = 8000;
//接口错误拦截
axios.interceptors.response.use(function(response){
    let res = response.data;
    if(response.status == 0){
        return response.data;
    }else if(response.status == 10){
        window.location.href = '/#/login';
    }else{
        alert(res.msg);
    }
});

Vue.use(VueAxios,axios);

页面样式的编写

        NavHeader.vue的编写

        思路：

        小米商城网页最上面导航栏出现在很多页面中，所以我们只需先将navheader和navfooter编写好。首先写头部导航栏，根据小米商城网页中，在头部导航栏中header大盒子中包括nav-topbar，nav-header。nav-topbar设置整个导航栏的高，背景图等。container是导航栏中标签内容的大盒子，小米商城MIUI等标签在左边，登录注册等在右边就分别设置两个class类名topbar-menu，topbar-user。再然后就去设置类名的样式。

         接下来就是navheader部分，使用cotainer类名将header-log图，类名header-menu（小米手机，电视标签），header-search搜索框。

<template>
    <div class="header">
       <div class="nav-topbar">
        <div class="container">
            <div class="topbar-menu">
                <a href="javascript:;">小米商城</a>
                <a href="javascript:;">MIUI</a>
                <a href="javascript:;">云服务</a>
                <a href="javascript:;">协议规则</a>
            </div>
            <div class="topbar-user">
                <a href="javascript:;">登录</a>
                <a href="javascript:;">注册</a>
                <a href="javascript:;" class="my-cart">
                    <span class="icon-cart"></span>
                    购物车</a>
            </div>
        </div>
       </div>
       <div class="nav-header">
        <div class="container">
            <div class="header-logo">
                <a href="/#/index"></a>
            </div>
            <div class="header-menu">
                <div class="item-menu">
                    <span>小米手机</span>
                    <div class="children"></div>
                </div>
                <div class="item-menu">
                    <span>RedMi红米</span>
                    <div class="children"></div>
                </div>
                <div class="item-menu">
                    <span>电视</span>
                    <div class="children"></div>
                </div>
            </div>
            <div class="header-search">
                <div class="wrapper">
                    <input type="text" name="keyword">
                    <a href="javascript:;"></a>
                </div>
            </div>
        </div>
       </div>
    </div>
</template>
<script>
export default{
    name:'nav-footer',

}
</script>
<style lang="scss">
    @import url('../assets/base.scss');
    .header{
        .nav-topbar{
            height: 39px;
            line-height: 39px;
            background-color: #333333;
            color: #B0B0B0;
            .container{
                width: 1226px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                a{
                    display: inline-block;
                    color: #B0B0B0;
                    margin-right: 17px;
                }
                .my-cart{
                    width: 110px;
                    background-color: #FF6600;
                    color: #ffffff;
                    text-align: center;
                    .icon-cart{
                        display: inline-block;
                        width: 16px;
                        height: 12px;
                        margin-right: 4px;
                        background: url('../../public/imgs/icon-cart-checked.png')no-repeat center;
                    }
                }
            }
        }
        .nav-header{
            .container{
                height: 112px;
                width: 1126px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .header-logo{
                    display: inline-block;
                    width: 55px;
                    height: 55px;
                    background-color: #FF6600;
                    a{
                        display: inline-block;
                        width: 110px;
                        height: 55px;
                        &:before{
                            content:' ';
                            display: inline-block;
                            width: 55px;
                            height: 55px;
                            background: url('../../public/imgs/mi-logo.png') no-repeat center;
                            background-size: 55px;
                            transition: margin .2s;
                        }
                        &:after{
                            content:' ';
                            display: inline-block;
                            width: 55px;
                            height: 55px;
                            background: url('../../public/imgs/mi-home.png') no-repeat center;
                            background-size: 55px;
                        }
                        &:hover:before{
                            margin-left: -55px;
                            transition: margin .2s;
                        }
                    }
                }
                .header-menu{
                    width: 543px;
                    display: inline-block;
                    padding-left: 209px;
                    .item-menu{
                        display: inline-block;
                        color: #333333;
                        font-weight: bold;
                        font-size: 16px;
                        line-height: 112px;
                        margin-right: 20px;
                        span{
                            cursor: pointer;
                        }
                        &:hover{

                        }
                    }
                }
                .header-search{
                    width: 319px;
                    .wrapper{
                        height: 50px;
                        border: 1px solid #E0E0E0;
                        align-items: center;
                        input{
                            border: none;
                            box-sizing: border-box;
                            border-right: 1px solid #E0E0E0;
                            width: 264px;
                            height: 50px;
                            padding-left: 14px;
                        }
                        a{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background: url('../../public/imgs/icon-search.png') no-repeat center;
                            background-size: contain;
                            margin-left: 17px;
                        }
                    }
                }
            }
        }
    }
</style>