# mi-mall

**Repository Path**: chun1123/mi-mall

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-11
- **Last Updated**: 2022-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mi-mall

## 1.项目安装及启动
Project setup
```
npm install
```

Compiles and hot-reloads for development
```
npm run serve
```

Compiles and minifies for production
```
npm run build
```

Lints and fixes files
```
# 自动规范化代码
npm run lint
```

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



## 2.mi-mall 前端项目搭建

### 2.1页面划分

#### 首页

https://www.mi.com/index.html

#### 商品详情页

https://www.mi.com/buy/detail?product_id=14789

#### 购物车页面

https://www.mi.com/buy/cart

#### 订单结算页

https://www.mi.com/buy/checkout?r=10962.1631350160

#### 订单详情页

未结算，不知道。

#### 公共部分

header、banner、footer

```
main:
{
  App:{
  	Header:{
    },
    Page-main:{
    },
    Footer:{
      Site-footer:{}
      Site-info:{}
    }
  }
}

detail:
{
  App:{
  	Header:{
    },
    mi-detail:{
    },
    Footer:{
      Site-footer:{}
      Site-info:{}
    }
  }
}

cart:
{
  App:{
  	Header:{
    },
    mi-cart:{
    },
    Footer:{
      Site-footer:{}
      Site-info:{}
    }
  }
}

checkout:
{
  App:{
  	Header:{
    },
    mi-checkout:{
    },
    Footer:{
      Site-footer:{}
      Site-info:{}
    }
  }
}

https://www.mi.com/user/orderView?order_id=5180124289000245
{
  App:{
  	Header:{
    },
    mi-orderview:{
    },
    Footer:{
      Site-footer:{}
      Site-info:{}
    }
  }
}

https://www.mi.com/user/orderList
{
  App:{
  	Header:{
    },
    order-list:{
    },
    Footer:{
      Site-footer:{}
      Site-info:{}
    }
  }
}
```



### 2.2工作步骤

2.2.1 header

2.2.2 footer

2.2.3 main

Vscode 保存文件时自动格式化。

https://www.cnblogs.com/RandyField/p/12873538.html

搭建工程时遇到的问题：

详见文件：https://github.com/element-plus/element-plus/issues/3392

解决办法：

```
# 新建文件vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        }
      ]
    }
  }
}
```



修改vscode 保存js 文件自动格式化

```
# 新建 settings.js 文件
{
      "editor.fontSize": 17,//编辑器字体大小
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },//scss格式化工具
    "workbench.iconTheme": "vscode-icons",//vscode文件图标主题
    // "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",//默认终端shell
    "go.formatTool": "goimports",//golang格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
    "[javascript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },//javascript格式化工具
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },//vue格式化工具
    "editor.insertSpaces": false,
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "files.autoSave": "afterDelay", //编辑自动保存
    "editor.lineNumbers": "on", //开启行数提示
    "editor.quickSuggestions": {
      //开启自动显示建议
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "editor.formatOnSave": true, //每次保存自动格式化
    // "eslint.codeActionsOnSave": {
    //     "source.fixAll.eslint": true
    // },
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": false, //使用单引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned" //属性强制折行对齐
      },
      "prettier": {
        "semi": false,
        "singleQuote": true
      },
      "vscode-typescript": {
        "semi": false,
        "singleQuote": true
      }
    },
    "eslint.validate": [
      "vue",
      // "javascript",
      "typescript",
      "typescriptreact",
      "html"
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}
```

### 公共footer构建

每个页面引入footer

footer构成：

site-footer:ul>li dl:dt

Site-info


### 使用 json-server 模拟后端数据
https://github.com/typicode/json-server
安装：

```
# 安装
npm install -g json-server
```

创建文件

```
# 创建 json 文件 db.json
{
	"phones": [
		{
			"id": 1,
			"uid": 1,
			"name": "Xiaomi MIX 4",
			"description": "CUP全面屏 | 真彩原色 + 120Hz | 一体化轻量陶瓷机身 | 高通骁龙™888+ | WiFi 6 增强版 | 石墨烯「冰封」散热系统4500mAh 大电量 | 常温 120W 快充 | 50W 无线快充 | 1 亿像素电影相机",
			"pic_urls": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1628588553.56819324.jpg",
			"price": 4999,
			"quantity": 100,
			"version": 0
		},
		{
			"id": 2,
			"uid": 2,
			"name": "Redmi Note 10 Pro",
			"description": "天玑1100年度旗舰芯｜VC液冷散热｜120Hz旗舰变速金刚屏 ｜67W 闪充 5000mAh 大电池｜JBL 立体声双扬声器｜UFS 3.1｜6400万AI三摄｜多功能NFC 3.0",
			"pic_urls": "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1621955784.84614979.jpg",
			"price": 1599,
			"quantity": 100,
			"version": 0
		}
	],
	"users": []
}
```

启动服务器

```
# 启动服务器
json-server --watch db.json
```

### 项目说明
目前只开发了 Home 和 Product 两个模块，以及MiHeader 和 MiFooter 两个头部和尾部公共模块。
默认进入 Home （对应 src/views/Home/index.vue），进入主页后，会去模拟后端
http://localhost:3000/product
请求数据，并渲染在手机的 div 中。

![截屏2021-09-24 上午12.30.00](./readme_assets/截屏2021-09-24%20上午12.30.00.png)

点击手机 div 中的 右侧几个展示位，可以跳转到相应的手机详情页面。
进入主页后，会去模拟后端http://localhost:3000/product/{productId}
请求数据，并渲染在手机的详情中。
![截屏2021-09-24 上午12.32.41](readme_assets/截屏2021-09-24%20上午12.32.41.png)