基于Vue的蔬菜购买APP

基于Vue的蔬菜购买APP

使用Vue脚手架和Vant搭建的H5界面的蔬菜购买App，集成登录、注册、购物车展示等功能，由本地存储储存数据，未加后端数据传输和数据库，有兴趣的同学可自行添加。

1.系统功能模块介绍

该蔬菜购物APP主要包含系统首页、商品分类、购物车、个人设置页面四⼤设计模块。中⼼模块为商品分类展示模块，包括展示商品、将商品添加至购物车、显示商品详情三⼤功能，商品展示功能展示商品标题、价格、简述，⽤户可以通过点击商品查看详细信息，包含商品产地、详细介绍、存储方式、推荐理由等，喜欢可点击添加到购物车。

2.系统基本功能介绍及分析

组件设计及功能分析：
根据系统功能，设计了相应的Vue⻚⾯级组件及⼀些⼩组件，具体如下表格所示。
Views中的组件：

组件名称	功能描述
GuideView.vue	引导页，由轮播图构成
LoginView.vue	APP登录注册界面
MainView.vue	主界面，负责四大模块显示
GoodsView.vue	展示所有商品信息
DetailView.vue	商品详情
CartView.vue	购物车界面
OrderView.vue	订单信息
MineView.vue	个人设置页面
LocationView.vue	收货地址页面

components中组件

组件名称	功能描述
TheHeader.vue	顶部组件，包含定位和搜索，用于首页和所有商品页
TheHome.vue	首页组件，展示首页情况和推荐商品，在MainView中使用
GirdGoods.vue	宫格式商品组件，在TheHome、MineView中使用
GoodsList.vue	列表式商品组件，在GoodsView中使用
GoodsShow.vue	商品展示组件，在GirdGoods、GoodsList中使用
NavBar.vue	自定义样式NavBar组件
ForgetPasswd.vue	忘记密码页面
AddressSet.vue	收货地址设置组件，在LocationView.vue、MineView.vue中使用
AddressEdit.vue	收货地址编辑组件，在AddressSet中使用
SearchGoods.vue	搜索商品组件，在TheHeader中使用
CartList.vue	购物车商品列表展示，在CartView中使用
OrderList.vue	订单展示页组件，在OrderView中使用
SettingInfo.vue	个人设置组件，在MineView中使用
data.js	所有商品数据
util.js	公共工具，用于在本地存储中存储、获取相关信息

系统路由情况：此处请粘贴index.js中的路由代码

const routes = [
  {
    path: "/",
    name: "guide",
    component: () => import("../views/GuideView.vue"),
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../views/LoginView.vue"),
  },
  {
    path: "/main",
    redirect: "/main/home",
    component: () => import("../views/MainView.vue"),
    children: [
      {
        path: "home",
        component: () => import("../components/TheHome.vue"),
      },
      {
        path: "goods",
        component: () => import("../views/GoodsView.vue"),
      },
      {
        path: "cart",
        component: () => import("../views/CartView.vue"),
      },
      {
        path: "mine",
        component: () => import("@/views/MineView.vue"),
      },
    ],
  },
  {
    path: "/location",
    redirect: "/location/addressset",
    component: () => import("../views/LocationView.vue"),
    children: [
      {
        path: "addressset",
        component: () => import("../components/AddressSet.vue"),
      },
      {
        path: "addressedit",
        component: () => import("../components/AddressEdit.vue"),
      },
    ],
  },
  {
    path: "/forget",
    component: () => import("../components/ForgetPasswd.vue"),
  },
  {
    path: "/order",
    component: () => import("../views/OrderView.vue"),
  },
  {
    path: "/setting",
    component: () => import("../components/SettingInfo.vue"),
  },
  {
    path: "/detail",
    component: () => import("../views/DetailView.vue"),
  },
  {
    path: "/search",
    component: () => import("../components/SearchGoods.vue"),
  },
];

实现效果

Github链接

Github链接