Vue3+Vant4 电商平台-首页面详细教程

电商平台首页面制作

1. 技术点：

使用Vue3+Vant4 实现首页面的制作

2. 参考手册

Vant 4 官网：https://vant-ui.github.io/vant/#/zh-CN/

3. 页面效果

? ? ? ?

4.具体操作步骤

4.1. 创建Vue3 项目

? ? ?如果不会创建，之前文章有详细讲解，请查看

4.2. 安装Vue-Router / Vant

? ?npm install vue-router

? ?npm install vant

4.3 具体代码

4.3.1 商品模块组件（src/components/GoodsItem.vue）

<template>
    <div class="goods-item">
        <div class="left">
            <img src="https://img14.360buyimg.com/n0/jfs/t1/65462/30/23386/129313/642141c0Fc8017a0f/75d08b31b05557ea.jpg" alt="" />
        </div>
        <div class="right">
            <p class="tit text-ellipsis-2">
                维辰思 便携式显示器2K高刷4K触摸屏
            </p>
            <p class="count">已售100件</p>
            <p class="price">
                <span class="new">￥250</span>
                <span class="old">￥30</span>
            </p>
        </div>
    </div>
</template>
<script setup>

</script>
<style>
    .goods-item {
        height: 148px;
        margin-bottom: 6px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        background-color: #fff;
        display: flex;
    }
    .left{
        width: 127px;
    }
    .left img{
        display: block;
        width: 100%;
    }
    .right{
        flex: 1;
        font-size: 14px;
        line-height: 1.3;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .right .count{
        color: #999;
        font-size: 12px;
    }
    .price{
        color: #999;
        font-size: 16px;
    }
    .price .new{
        color: #f03c3c;
        margin-right: 10px;
    }
    .price .old{
        text-decoration: line-through;
        font-size: 12px;
    }
</style>

4.3.2 首页面具体代码（src/views/Index.vue）

<template>
    <div class="index">
        <!--标题栏-->
        <van-nav-bar title="老马商城"></van-nav-bar>     
        <!--搜索框-->
        <van-search
        background="#f1f1f2" 
        placeholder="请输入搜索关键词" /> 
        <!--轮播图-->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
                <img src="@/assets/1.jpg"/>
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/2.jpg"/>
            </van-swipe-item>
            <van-swipe-item>
                <img src="@/assets/3.jpg"/>
            </van-swipe-item>
        </van-swipe> 
        <!--分类列表-->
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="item in categoryData">
                <van-image
                :src="item.imgpath"
                />
                <p>{{ item.title }}</p>
            </van-grid-item>
        </van-grid>
        <!--广告图-->
        <div class="main">
            <img src="@/assets/ad.jpg"/>
        </div>  
        <!--商品列表-->
        <div class="guess">
            <p class="guess-like">—— 热门商品推荐 ——</p>
            <div class="goods-list">
                <GoodsItem v-for="item in 2"></GoodsItem>
            </div>
        </div>     
    </div>
    <!--导航菜单-->
    <div>
        <router-view></router-view>
        <van-tabbar active-color="#ee0a24" inactive-color="#000">
            <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="apps-o">分类页</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>

</template>
<script setup>
    import GoodsItem from "@/components/GoodsItem.vue";
    import { reactive } from "vue";
    const categoryData = reactive([
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png',
            title: '超市'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png',
            title: '电器'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png',
            title: '海鲜'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png',
            title: '充值'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png',
            title: '附近好店'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png',
            title: 'PLUS会员'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/97574/40/22764/2060/64a4ff80Fd550d65e/eeea8b95458cc7fd.png',
            title: '到家'
        },
        {
            imgpath: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png',
            title: '服饰美妆'
        },   
        
    ])
</script>
<style>
    .index{
        padding-bottom: 50px;
    }
    .van-nav-bar{
      background-color: #c21401;
    }
    .my-swipe .van-swipe-item {
        height: 185px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        background-color: #39a9ed;
    }
    .my-swipe .van-swipe-item img{
        width: 100%;
        height: 185px;
    }
    .van-grid{
        padding-top: 18px;
    }
    .van-grid .van-grid-item img{
        width:40px;
        height:40px;
    }
    .van-grid .van-grid-item p{
        font-size: 15px
    }
    .van-grid-item{
        height: 75px;
    }
    .main img{
        width: 100%;
        height:200px
    }
    .guess .guess-like {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
</style>

4.3.3 路由配置（src/router/index.js）

import {createRouter,createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            redirect: '/index'
        },
        {
            path: '/index',
            name: 'index',
            component: () => import('@/views/Index.vue')
        }
    ]
})
export default router

4.3.4 主文件（main.js）

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index'
//-vant配置
import Vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)
app.use(Router)
app.use(Vant)
app.mount('#app')

4.3.5 主页面（App.vue）

<template>
  <RouterView></RouterView>
</template>

到此，整个案例整理完毕！