# vue-waimai

**Repository Path**: fernandozed/vue-waimai

## Basic Information

- **Project Name**: vue-waimai
- **Description**: 用Vue和Vant写一个外卖应用
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-18
- **Last Updated**: 2024-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-waimai

## 项目说明

仿写外卖 APP 前端页面

- 框架：Vue
- UI 框架：Vant
- 数据通过 JS 文件模拟
- 图标通过 Iconfont 下载（一部分来自 Vant 框架）

### 项目结构

```txt
src

│  App.vue
│  main.js
│
├─assets    --> 资源文件目录
│  │  logo.png
│  │
│  ├─css    --> 样式文件目录
│  │      colors.less   --> 自定义Less颜色变量
│  │      index.less    --> 通用样式
│  │      numbers.less  --> 自定义Less数值变量
│  │
│  ├─font   --> 字体文件目录
│  ├─iconfont   --> 字体图标目录（文件来自iconfont）
│  │      iconfont.css
│  │      iconfont.js
│  │      iconfont.json
│  │      iconfont.ttf
│  │
│  └─img    --> 图片目录
│
├─components    --> 自定义组件目录
│      BottomText.vue   --> 页面底部文字组件
│      CartItem.vue     --> 购物车组件
│      CommentItem.vue  --> 评论组件
│      CommonCoupon.vue --> 优惠券组件
│      CommonFilter.vue --> 删选工具栏组件
│      CommonNav.vue    --> 通用头部导航栏组件
│      CommonPoint.vue  --> 积分组件
│      FoodItem.vue     --> 餐品组件
│      ImageViews.vue   --> 餐品图片展示组件
│      MyCommentItem.vue    --> 我的评价组件
│      OrderDetailItem.vue  --> 订单详情组件
│      OrderItem.vue    --> 订单组件
│      ShopItem.vue     --> 商家组件
│
├─data  --> 自定义数据文件夹（前端模拟数据）
│      home.js      --> 主页商家数据（商家，菜单等）
│      orders.js    --> 订单数据
│
├─router    --> 路由目录
│      index.js
│
├─store     --> Vuex目录
│      index.js
│
└─views     --> 页面目录
    │  Login.vue    --> 登录页面
    │  MainPage.vue --> 主页面（包含底部导航栏）
    │  Register.vue --> 注册页面
    │
    └─main
        │  Home.vue --> Home主页
        │  Mine.vue --> “我的”页面
        │  Orders.vue   --> 订单页面
        │  Vip.vue  --> 会员页面
        │
        ├─common
        │      Messages.vue     --> 信息页面
        │      ShopDetail.vue   --> 商家详情页
        │
        ├─home
        │      Cart.vue         --> 购物车页面
        │      Categories.vue   --> 分类页面（根据首页菜单显示不同分类）
        │      Search.vue       --> 商家页搜索页面
        │
        ├─mine
        │      Addr.vue         --> 地址页面
        │      Comments.vue     --> 评论页面
        │      Coupon.vue       --> 优惠券页面
        │      Favorate.vue     --> 收藏页面
        │      Help.vue         --> 帮助与反馈页面
        │      Points.vue       --> 积分页面
        │      Service.vue      --> 客服页面
        │      Settings.vue     --> 设置页面
        │      Ticket.vue       --> 代金券页面
        │
        └─orders
                OrderDetail.vue --> 订单详情页
                SearchOrders.vue    --> 订单搜索页
```

### 打包项目

```
yarn build
```

### 运行项目

```
yarn serve
```

### 操作说明

进入项目后即显示登录页面

暂未设置用户名与密码，直接点击登录即可进入主页