在vue脚手架环境利用vant组件简单实现移动端购物商城系统

本文介绍如何在Vue脚手架环境下，通过 vant 组件库快速构建一个移动端购物商城系统。首先，通过npm下载 vant 插件并全局配置；接着，安装 axios 用于数据请求。然后，创建多个页面组件，如购物车、商品分类、商品列表等，并在router配置路由。最后，详细介绍了App.vue、Index.vue、Main.vue、Search.vue、Classify.vue、Goodlist.vue、Carts.vue 和 Myself.vue 的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

用vue脚手架创建好项目，进行以下操作
①下载vant插件
在终端或cmd中运行

npm i vant -S

在main.js中全局配置vant

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

②下载安装axios
在终端或cmd中运行

npm install axios -S

在main.js中全局配置axios

import axios from 'axios'
Vue.prototype.$axios = axios

③在views中创建Carts.vue(购物车页面)，Classify.vue(商品分类)，Goodslist.vue(商品列表),Index.vue,Main.vue(首页),Myself.vue(我的),Search.vue(搜索页面)

④在router下的index.js配置路由

const routes = [
  {
    path: '/',
    name: 'Index',
    component: () => import( '../views/Index.vue'),
    redirect:'/main',
    children:[
      {
        path: '/main',
        name: 'Main',
        
        component: () => import( '../views/Main.vue')
      },
      {
        path: '/classify',
        name: 'Classify',
        
        component: () => import( '../views/Classify.vue')
      },
      {
        path: '/carts',
        name: 'Carts',
        
        component: () => import( '../views/Carts.vue')
      },
      {
        path: '/myself',
        name: 'Myself',
        
        component: () => import( '../views/Myself.vue')
      },
    ]
  },
  {
        path: '/search',
        name: 'Search',
        
        component: () => import( '../views/Search.vue')
  },
  {
    path: '/list',
    name: 'Goodlist',
    
    component: () => import( '../views/Goodlist.vue')
}
  
]

⑤App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

⑥Index.vue

<template>
  <div>
      <router-view></router-view>
      
      <van-tabbar  route active-color="#1989fa" >
      <van-tabbar-item  name="home" icon="home-o" to='/main'>首页</van-tabbar-item>
      <van-tabbar-item  name="home" icon="search" to="/classify" badge="2">分类</van-tabbar-item>
      <van-tabbar-item name="home" icon="cart-o" to="/carts" :dot='true'>购物车</van-tabbar-item>
      <van-tabbar-item name="home" icon="manager-o" to="/myself">我的</van-tabbar-item>
      
    </van-tabbar>
  </div>
</template>

<script>

export default {
    
    
    data(){
    
    
      return {
    
    
        active:0
      }
    }
}
</script>

<style>

</style>

⑦Main.vue （首页）
在这里插入图片描述

<template>
  <div>
      <!-- 输入搜索框 -->
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        background="#E73A68"
        @focus="searchFocus"
        >
        <template #label>
            <span class="search-logo">JD</span>
        </template>
        <template #action>
            <span style="color:#fff;font-size:16px;">登录</span>
        </template>
        <template #left>
            <van-icon name="wap-nav" color="#fff" size="25px" style="margin-right:10px" />
        </template>
        
        </van-search>

        <!-- 轮播广告 -->
        <div>
            <van-swipe :autoplay="3000"  style="width:90%;margin:15px auto;border-radius:10px" indicator-color="red" >
                <van-swipe-item v-for="url in images" :key="url">
                    <img  :src="url" style="width:100%" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 宫格 -->
        <van-swipe :autoplay="3000" :loop="false" style="padding:10px 0">
            <van-swipe-item>
                <van-grid :column-num="5" :border="false">
                    <van-grid-item v-for="(item,index) in imgData" :key="index"  :text="item.title" v-show="index < 10">
                        <template #icon>
                            <img :src="item.img" width="50px" />
                        </template>
                    </van-grid-item>
                    
                </van-grid>   
            </van-swipe-item>
            <van-swipe-item>
                <van-grid :column-num="5" :border="false">
                    <van-grid-item v-for="(item,index) in imgData" :key="index"  :text="item.title" v-show="index >= 10 && index < 20">
                        <template #icon>
                            <img :src="item.img" width="50px" />