# xiaomi-mall-pc-demo

**Repository Path**: zhuanghaixin/xiaomi-mall-pc-demo

## Basic Information

- **Project Name**: xiaomi-mall-pc-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-10-27
- **Last Updated**: 2023-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xiaomi-mall-pc-demo
基于vueJS开发的高仿小米商城项目
## 技术栈
```
 Vue.js + Vue-router + Vuex + Webpack + Axios + Sass + Element
```
## 项目介绍  
项目使用vue.js进行开发，目前已经完成基本的交互与页面。包括登录页面、商城首页、产品介绍、添加购物车、订单提交等。
## 业务功能实现
    * 登录
    * 商品列表展示
    * 产品站
    * 加购物车及购物车实现删除商品、添加商品
    * 收货地址选择、修改与删除
    * 提交订单
    * 订单列表展示
    * 支付
## 交互功能实现 （项目中的动画、过渡使用css3与vue提供的transition组件制作）
    * 首页轮播图、产品详情轮播图
    * 动态吸顶栏
    * 图片懒加载  
    * 页面加载进度条
    * 购物车、提交订单等页面loadding图
    * 基本的弹出框交互
## 测试账号
    由于暂时没有实现注册页面
    先提供一个测试账号：
    ```
    用户名：admin
    密码：admin
    ```
## 项目截图 (部分) 
* 登录
 <img  src="./public/imgs/pages/login.png" />   
* 首页                                     
<img  src="./public/imgs/pages/index.png" />  
* 产品站
 <img  src="./public/imgs/pages/product.png"/>     

* 商品详情
<img  src="./public/imgs/pages/detail.png" />   
* 购物车   
<img  src="./public/imgs/pages/cart.png" />  
* 购物车无商品 
<img  src="./public/imgs/pages/no-product.png" />  
 * 订单结算
 <img  src="./public/imgs/pages/confirm-order.png" />  


    


## 项目启动

### 注意事项
项目启动前，请确保你安装了对应的环境，包括nodeJS环境。项目使用sass，因此确保项目启动前安装node-sass、sass-loader依赖。  

```
npm install   //安装依赖
```

### 编译、热更新
```
npm run serve   // 启动项目
```

### 编译、压缩
```
npm run build  // 打包压缩
```

### 运行测试
```
npm run test   //测试
```
## 项目启动
## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).