# 小兔仙-vue3+vite+ts+pc

**Repository Path**: call-me-mr-yu/vue3-ts-vite

## Basic Information

- **Project Name**: 小兔仙-vue3+vite+ts+pc
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-28
- **Last Updated**: 2025-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目介绍

## 项目介绍

> 了解下项目的基本功能。

- 电商发展十余年，是个成熟的模式，小兔鲜儿是 B2C 电商平台，综合品类平台。参考[网易严选](http://you.163.com/)
- 平台理念：（品质）新鲜、（价格）亲民、（物流）快捷。

> 功能模块

- 首页模块：顶部通栏，吸顶导航，网站头部，左侧分类，轮播图，新鲜好物，人气推荐，热门品牌，分类商品推荐，专题推荐，网站底部。
- 一级分类：面包屑，轮播图，全部二级分类，二级分类推荐商品。
- 二级分类：筛选区域，排序功能，商品列表，无限加载。
- 商品详情：商品图片展示，基本信息展示，配送城市选择，SKU 选择，库存选择，商品详情展示，商品评价展示，24 小时热销，相关专题，加入购物车。
- 购物车
  - 头部购物车：展示商品数量和列表，删除商品，跳转购物车页面。
  - 购物车页面：购物车商品展示，选择商品，修改数量，修改商品规格，价格计算，跳转下单
- 登录模块：表单校验，账户密码登录，手机号登录，第三方登录，绑定手机，完善信息
- 填写订单：订单商品展示，收货地址选择，收货地址修改，支付方式选择，生成订单。
- 进行支付：订单信息展示，跳转支付网关，提示正在支付，等待支付结果，跳转支付成功页面。
- 个人中心
  - 中心首页：展示个人信息，近期收藏商品，近期足迹，猜你喜欢
  - 订单管理：全部订单，待付款，待发货，待收货，待评价，已完成，已取消。立即付款，取消订单，确认收货，删除订单，查看物流。
  - 订单详情：订单状态，订单进度，详细信息。

总结：完成电商支付闭环。

## 配套资源

> 目的：了解真实企业开发都会有哪些配套资源。

开发配套：

- [原型稿](https://app.mockplus.cn/run/prototype/QO7BCWlUKB/IWlj1dabSw/c-f4gj1smb0?ha=1&ps=1)

- [接口文档](http://zhoushugang.gitee.io/erabbit-client-pc-document/api.html)

- [项目起步](https://zhoushugang.gitee.io/erabbit-client-pc-document/guide/03-home.html#_01-%E9%A6%96%E9%A1%B5-%E8%B7%AF%E7%94%B1%E4%B8%8E%E7%BB%84%E4%BB%B6)

- [参照案例](http://erabbit.itheima.net/#/)

```
账号:jfjbwb4477@sandbox.com
密码:111111
```

总结：

- 在学习开发阶段使用本地 API 文档与 vue3.0 版本样例。

## 使用技术

> 目的：概述下项目会运用到的技术点。

项目基于 vue 技术来实现，大概会使用以下技术：

- vue3.0 (使用组合 api 的方式来开发)
- vite 开发
- axios (请求接口)
- vue-router (单页路由)
- pinia (状态管理)
- normalize.css (初始化样式)
- @vueuse/core (组合 api 常用工具库)
- 算法 [Power Set](https://github.com/zhousg/javascript-algorithms/blob/master/src/algorithms/sets/power-set)
- dayjs (日期处理)
- vee-validate （表单校验）

**重点：** 电商常见业务和解决方案，掌握基于 vue3.0 的组合 api 开发模式。

**说明：** 由于前台项目，没有合适的 UI 组件库（没有适用 vue3.0 的 ui 库），不会使用组件库。

- 轮播图组件
- 面包屑组件
- 查看更多组件
- 骨架屏组件
- 复选框组件
- 单选框组件
- 对话框组件
- 消息提示组件 函数调用
- 消息确认组件 函数调用
- 分页组件
- 步骤条组件
- 时间线组件
- 标签页组件
- 城市选择组件

总结：基于 vue3.0 的技术栈，大量的组件封装。

## 项目起步

**核心步骤：**

- 使用 vite 初始化项目

```bash
pnpm create vite rabbit-vue3-ts --template vue-ts
```

- 安装依赖包, 需要进入到`rabbit-vue3-ts`项目中

```
pnpm i
```

- 启动项目

```
pnpm dev
```