# supermall

**Repository Path**: JSy-Qing/supermall

## Basic Information

- **Project Name**: supermall
- **Description**: Vue 移动端电商项目（迭代中...）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://www.qingcool.cn/main/supermall/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-07
- **Last Updated**: 2023-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

在线地址：http://47.102.129.23:8080/

项目 Gitee 地址：`https://gitee.com/JSy-Qing/supermall.git`

### 新项目：

**划分目录结构**

- assets：静态资源
- common：公共js文件
- components：公共组件
    common：通用组件（其他项目也能使用）
    content：业务组件（此项目中业务相关组件）
- network：网络相关
- router：路由相关
- store：vuex状态管理
- views：各种视图组件

**初始化项目**

- 安装路由 `npm install vue-router --save`
    
- 安装vuex `npm install vuex@next --save`
    
- 安装axios `npm install axios --save`
    // vue进行网络通信
    
- 安装better-scroll `npm install better-scoll --save`
    // 优化网页滚动
    
- 安装图片懒加载 `npm install vue3-lazyload --save`
    // 优化网页加载速度
    
- 安装单位转化插件
    `npm install postcss-px-to-viewport --save-dev`
    // 适配px->vw
    
- 已卸 安装移动端适配插件`npm install lib-flexible --save-dev`
    // 改变 font-size为页面宽度 1 / 10
    
- 安装 Echarts  `npm install echarts --save`
    
- 安装 Webpack `npm install webpack --save-dev`
    
- 安装 Webpack-cli `npm install webpack-cli --save-dev`
- 安装文件压缩插件
    `npm install --save-dev compression-webpack-plugin --legacy-peer-deps`
    

# 性能优化相关

**针对首屏加载时间过长**

- 配置问题：可能打包的文件有 .map 类型，map 文件作用：项目打包后，代码都是通过压缩加密的，如果运行时报错，输出的错误信息无法准确的得知哪里的代码有误。
    解决方法：在 vue.config.js 里加上 productionSourceMap: false 不生产 .map 文件
- 物理压缩：使用压缩工具强制将文件压缩小（通过 vue 插件实现打包压缩，并在服务端通过 nginx 配置来压缩文件）代价耗费更多的 CUP 资源。
- 路由懒加载：按需加载
- 引入第三方库：例如 Echarts 使用按需加载，并且不要直接注册到 main.js 里
- 代码优化：v-if 和 v-show 区分使用场景，computed 和 watch 区分使用场景
- 服务端 SSR（TODO）


# 其他

**TODO:**

Bug 汇总：

- 移动端banner失效问题（有时正常）
- 从详情页返回有概率直接返回顶部

# 移动端适配


1.  针对 echarts 移动端（平板设备）需适配图表各种元素的字体大小问题，同时方法封装放入 mixin 文件里
2.  使用 vw 适配方案，配合插件 postcss-px-to-viewport 自动将 px 单位转化为 vw（开发尺寸：iPhone XR 414 × 896）