使用vant4+vue3制作电商购物网站

一、前言

1.本项目基于vant4+vue3构建，默认友友们已具备相关知识，如不具备，请友友们先去了解相关该概念

2.项目数据来源于开源框架新峰商城在此指出

3.此项目目的在于帮助友友们了解基本的用法，没有涉及太多的逻辑操作。

二、项目介绍

首页

我的

三、项目搭建

大家可以看看项目所需的依赖，具体的安装命令如下

axios

npm install axios --save

less（为了书写样式方便，不需要强制安装）

npm install less --save

mockjs（使用mockjs制造假数据）

npm install mockjs --save

vant（可以去官网看看组件的使用用法）

npm i vant

vue-router（必须要的哈，进行页面切换的）

npm install vue-router

安装为项目所需的依赖，我们需要将需要的依赖引入我们的项目中

在main.js中引入并使用安装好的vant

创建路由并加载到main.js

路由的配置

注意:路由文件所需要的home、user、cag组件自己先定义好，然后引入到路由文件中，大家也可以使用懒加载的方式，具体组件的创建就不演示了。

四、页面制作

在配置完路由之后，思考我们的配置的路由是做什么的。通常为了页面的切换，我们会需要一个固定在顶部的导航条，我们称之为tabbar，且所有的页面都能看到这个导航条

首页显示

路由配置结束，需要将其显示出来，路由出口配置在app.html页面

在本项目中，我将首页重定向到home页面，所有接下来的所有操作，我们去到home页面

这是home页面的结构，包括搜索框、轮播图、商品分类、商品显示，顶部导航，有经验的小伙伴可以看看view文件夹和components文件夹，这里我将具体的页面放在view下，其余组件拆分放到components

具体显示效果如下

现在我们拆分这个页面

搜索框

代码

<template>
    <van-sticky>
        <van-search
          shape="round"
          background="#1baeae"
          placeholder="请输入搜索关键词"
        >
 
        </van-search>
    </van-sticky>

</template>

van-sticky为黏性布局，也就是鼠标向下滑动，搜索框会固定在顶部

轮播图（swiper）

代码

<template>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(item,index) in newGoods.carousels" :key="index">
        <img :src="item.carouselUrl" />
  </van-swipe-item>
</van-swipe>
</template>
<script setup>
    import {onMounted,reactive} from "vue"
    import request from "../mock/request.js"
    const newGoods = reactive(
        {
            carousels:[]
        }
    )
    onMounted(async() =>{
        let result = await request({
          url:'/mock/getGoods',
          method:'get'
      })
      if(result.data.code === 200){
          newGoods.carousels = result.data.data.carousels
      }
     
    })
</script>
<style type="text/css" media="all" scoped>
    img{
        width: 100%;
        height: 200px;
    }
</style>

这里大家看看mock中我们写的假的json数据

{
     "carousels": [
      {
        "carouselUrl": "https://res.vmallres.com/uomcdn/CN/cms/2024-05/6580fa613c574939a84e0a04e288292b.jpg",
        "redirectUrl": "https://juejin.im/book/6844733826191589390"
      },
      {
        "carouselUrl": "https://res.vmallres.com/uomcdn/CN/cms/202405/240051cba47c47d384142a253d50cb6d.png",
        "redirectUrl": "https://juejin.im/book/6844733826191589390"
      },
      {
        "carouselUrl": "https://res.vmallres.com/uomcdn/CN/cms/202406/c16311df062d43c49f9e692728b5efd4.jpg",
        "redirectUrl": "https://juejin.im/book/6844733826191589390"
      },
      {
        "carouselUrl": "https://res.vmallres.com/uomcdn/CN/cms/2024-05/1e56a1ce74b8447baaf08b87eaf007ec.jpg",
        "redirectUrl": "https://juejin.im/book/6844733826191589390"
      }
      
    ]
}

看看mockserver.js文件，如果小伙伴写过node的话，这里应该很好理解

这里写了三个接口，对于的三个页面数据，轮播图中用的数据都在goods中，在request文件中，只是简单的对超时做了限制

此项目不需要我们我们二次封装axios

了解完这些前置知识和后，我们在认真关注下我们的swiper组件中的内容

认真看完上面教程，给位友友们应该可以将轮播图正确显示出来了

商品分类

代码

<template>
    <van-grid clickable   :column-num="5">
      <van-grid-item to="/cag" v-for="(value,index) in categoryList.list" :key="index"  :text="value.name">
          <van-image :src="value.imgUrl"></van-image>
          <span>{{value.name}}</span>
      </van-grid-item>
    </van-grid>

</template>
<script setup>
    import {onMounted,reactive} from "vue"
    import request from "../mock/request.js"
    const categoryList = reactive(
        {
            list:[]
        }
    )
    onMounted(async() =>{
        let result = await request({
          url:'/mock/getCategoryList',
          method:'get'
      })
      if(result.data.code === 200){
          categoryList.list = result.data.data
      }
      
    })
</script>
<style type="text/css" media="all" >
    .van-image__img{
        width: 50px !important;
        height: 50px !important;
    }
    span{
        font-size: 20px !important;
    }
</style>

我们看看这个页面的结构

mock中的数据

商品页面

代码

<template>
    <header class="good-header">新品上线</header>
    <div class="good-box" >
          <div class="good-item" v-for="item in newGoods.newGoods" :key="item.goodsId" @click="goToDetail(item)">
            <img :src="item.goodsCoverImg" alt="">
            <div class="good-desc">
              <div class="title">{{ item.goodsName }}</div>
              <div class="price">¥ {{ item.sellingPrice }}</div>
            </div>
          </div>
    </div>
   
      
</template>
<script setup>
    import { useRouter } from 'vue-router'
    import {onMounted,reactive} from "vue"
    import request from "../mock/request.js"
    const router = useRouter();
    const newGoods = reactive(
        {
            newGoods:[],
            hots: [],
            recommends: [],
        }
    )
    onMounted(async() =>{
        let result = await request({
          url:'/mock/getGoods',
          method:'get'
      })
      if(result.data.code === 200){
          newGoods.newGoods = result.data.data.newGoodses
          newGoods.hots = result.data.data.hotGoodses
          newGoods.recommends = result.data.data.recommendGoodses
      }
     
    })
    const goToDetail = (item) => {
      router.push({ path: `/product/${item.goodsId}` })
    }
</script>
<style  scoped>

    .good-header {
      background: #f9f9f9;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #1baeae;
      font-size: 25px;
      font-weight: 500;
    }
   .good-box {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      
    }
   .good-item {
        box-sizing: border-box;
        width: 50%;
        border-bottom: 1PX solid #e9e9e9;
        padding: 10px 10px;
        
    }
    .good-item:nth-child(2n + 1) {
          border-right: 1PX solid #e9e9e9;
    }
    img {
      display: block;
      width: 120px;
      margin: 0 auto;
    }
    .good-desc {
      text-align: center;
      font-size: 20px;
      padding: 10px 0;
     
    }
      .title {
        color: #222333;
      }
      .price {
        color:#1baeae;
      } 
      
</style>

代码解释

点击挑转到商品详情

详情页面也是一致的，大家看情况编写。由于涉及到后续的购物车，所有我没有继续往下写了

底部导航

代码

<template>
    <van-tabbar v-model="active" class="bar"> 
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/cag">分类</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/user">个人</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref} from "vue"
    const active = ref('home');
</script>
<style type="text/css" >
    .bar{
        margin-top: 40px !important;
        
    }
    .van-tabbar-item{
        font-size: 16px !important;
    }
</style>

这里的代码就不做解释了，相信大家都能看懂

将所需要要的组件引入即可

分类页面

分类页面比较简单，经过首页一节的铺垫，现在我们将节奏快点

页面分为上中下三层。上层为搜索框；中间左侧为侧边栏，右边为商品；下层为导航条

代码

<template>
    <TabNav></TabNav>
    <div class="container">
        <SliderNav></SliderNav>
        <CagGoods></CagGoods>
    </div>
    <div style="width:100%;height:40px"></div>
    <Tabbar></Tabbar>
</template>
<script setup>
    import Tabbar from "../components/Tabbar.vue"
    import TabNav from "../components/TabNav.vue"
    import SliderNav from "../components/SliderNav.vue"
    import CagGoods from "../components/CagGoods.vue"
    
</script>
<style scoped>
    .container{
        display: flex;
        flex-direction: row;
    }
    .container .van-sidebar  {
        flex: 2;
    }
    .container .van-grid{
        flex: 10;
    }
</style>

这里贴出的代码是为了方便大家布局使用的

顶部导航

侧边栏

右侧goods

我的

<template>
    <div class="user">
        <Card></Card>
        <div class="box">
            <van-icon name="setting-o" class="setting"/>
            <span>设置</span>
        </div>
        <div class="box1">
           <van-icon name="service-o" class="service" ></van-icon>
            <span>联系客服</span>
        </div>
       
        <MyOrder></MyOrder>
        <MySerive></MySerive>
    </div>
    <Tabbar></Tabbar>
</template>
<script setup>
    import Tabbar from "../components/Tabbar.vue"
    import Card from "../components/Card.vue"
    import MyOrder from "../components/MyOrder.vue"
    import MySerive from "../components/MySerive.vue"
    
</script>
<style >
    .user{
        position: relative;
    }
    .van-card__title {
        font-size: 20px !important;
        margin-top: 10px;
        height: 30px !important;
        line-height: 30px;
    }
   
   
    .box{
        display: flex;
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 25px;
        flex-direction: column;
    }
     .box1{
        display: flex;
        position: absolute;
        justify-content:center;
        align-content: center;
        top: 10px;
        right: 80px;
        font-size: 25px;
        flex-direction: column;
    }
    .service{
        text-align: center;
    }
    span{
        font-size: 12px;
    }
   
</style>

MyOrder

<template>
    <div class="temp">
        <div class="top">
            <span class="order">我的订单</span>
            <span class="all">全部></span>
        </div>
        <div class="content">
            <div>
                 <van-icon name="shop-o" />
                <span>待付款</span>
            </div>
             <div>
                <van-icon name="gift-card-o" />
                <span>待发货</span>
            </div>
             <div>
                <van-icon name="setting-o" class="setting"/>
                <span>待收货</span>
            </div>
             <div>
                <van-icon name="chat-o" />
                <span>待评价</span>
            </div>
             <div>
                 <van-icon name="balance-o" />
                <span>退款/售后</span>
            </div>
        </div>
    </div>
</template>
<script>
    
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
     
    }
    .temp{
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        transition: 0.3s;
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background: #1baeae;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        overflow: hidden;
    }
     .temp:hover{
         box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
     }
    .top{
        display: flex;
        justify-content: space-between;
        align-content: center;
    }
    .order{
        font-size: 20px;
    }
    .all{
        margin-right: 20px;
    }
    .content{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .content div{
        margin-top: 10px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: center;
    }
    .content div span{
        margin-top: 5px;
    }
</style>