移动端与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。
在组件中调用仓库绑定仓库中的点击事件就可以啦~
配套后台管理系统实现请移步本人另一篇：