移动端与pc端不同，需要更多的考虑em，rem的单位转化，各个手机型号完美适配。对新手而言，这是一个难点。接下来我将以一个外卖移动端为例子进行讲解。

目录

一、屏幕的适配插件

二、预编译器

三、pinia实现购物车功能

1、商品总数

2、单个商品个数增加

3、单个商品个数减少

4、总价

5、清空购物车

---

1、安装

•  ：这个插件的作用是将CSS中的像素单位（px）转换为相对于根元素字体大小的rem单位。这样做的好处是，它可以帮助开发者创建响应式设计，使得在不同设备上显示的元素大小可以根据屏幕大小进行缩放。
• ：这个插件是阿里巴巴的一个前端团队开发的，它的作用是让移动端页面的尺寸单位统一为rem，并且可以方便地在不同设备上进行适配。它通过修改根元素的font-size来实现这一点。

2、配置

• ：这是调用插件的地方。
• ：这个选项指定了根元素（html元素）的字体大小，这里设置为16px。这意味着1rem等于16px。
• ：这个选项指定了需要转换为rem单位的CSS属性列表。这里使用表示所有属性都将被转换。

3、引入amfe-flexible，实现伸缩布局

在你的项目的入口文件（通常是或）中引入：

这行代码会将的样式应用到你的整个项目中。

这样你的移动端页面在检查时拖拽，大小宽高就会跟着变化啦！

是一个 webpack 模块加载器，用于将 LESS 文件编译成 CSS。

购物车没有商品时 

购物车有商品时 

点击购物车图标会显示购物清单

---

我们不难发现，商品总个数，单个个数，单价，总价，需要在多个组件中用到，所以我们把它们存到Pinia仓库中集中管理。

Pinia仓库的搭建与安装不多赘述。购物车上方的小红点即是点击+号就会增加的商品总数。

total属性初始为0，每点击+号就会调用increment（）方法给 total 加1

在仓库中创建cartItems存储被点击的项和价格

{ ...item, count: 1 } 如果item中没有count属性，则添加，如果有则覆盖。

和个数增加的逻辑差不多，但需要判断count为0时移除列表。

在仓库中创建totalAmount存储总价，初始为0。

在组件中调用仓库绑定仓库中的点击事件就可以啦~

配套后台管理系统实现请移步本人另一篇：