VueCli3.x前端开发-移动端商城

商城的主要用到的ui框架是vant，vant的引入和配置跟着文档来就ok

1.搭建主面板

<template>
    <div class="dashboard">
        <van-tabbar v-model="active">
            <van-tabbar-item >
                <span>首页span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? home_icon.active : home_icon.normal"
                >
            van-tabbar-item>
            <van-tabbar-item>
                <span>分类span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? category_icon.active : category_icon.normal"
                >
            van-tabbar-item>
            <van-tabbar-item info="3">
                <span>购物车span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? shoppingcart_icon.active : shoppingcart_icon.normal"
                >
            van-tabbar-item>
            <van-tabbar-item>
                <span>我的span>
                <img
                        slot="icon"
                        slot-scope="props"
                        :src="props.active ? mine_icon.active : mine_icon.normal"
                >
            van-tabbar-item>

        van-tabbar>
    div>
template>

<script>
    export default {
        name: "DashBoard",
        data() {
            return {
                active: 0,
                home_icon: {
                    normal: require('@/images/tabbar/home_default.png'),
                    active: require('@/images/tabbar/home_selected.png')
                },
                category_icon: {
                    normal: require('@/images/tabbar/category_default.png'),
                    active: require('@/images/tabbar/category_selected.png')
                },
                shoppingcart_icon: {
                    normal: require('@/images/tabbar/shoppingcart_default.png'),
                    active: require('@/images/tabbar/shoppingcart_selected.png')
                },
                mine_icon: {
                    normal: require('@/images/tabbar/mine_default.png'),
                    active: require('@/images/tabbar/mine_selected.png')
                },

            }
        }
    }
script>

<style scoped>
    .dashboard{
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
    }
style>

#基本代码搭成的界面

#这里用到了vant的底部导航tabbar

#为了保存底部导航的高亮选项，即当我选择了分类之后，再次刷新后，高亮部位还是分类，而不是默认跳到首页，这就需要把active保存到本地。

data() {
            return {
                active: Number(window.localStorage.getItem("activeIndex")||0),
            }
        },
        
watch:{
            //把active存储到本地中，防止每次刷新时，都会到首页
            active(value){
                window.localStorage.setItem("activeIndex",value);
            }
        }