基于VUE3仿美团的h5项目源代码，含项目部署说明

# 第一章 仿美团项目之需求分析 **简介：详解需求分析** - 需要开发的页面 - 首页 - 购物车 - 订单 - 个人中心 - 店铺 - 生成订单 - 地址管理 - 编辑地址 - 新增地址 - 账号管理 - 注册 - 登录 - 主要功能点 - 店铺商品的加入购物车功能 - 商品的下单功能 - 用户地址管理功能 - 账号管理功能 - 注册登录功能 # 第二章 仿美团项目之项目搭建和初始化配置 ## 安装vue的脚手架 ```js npm install -g @vue/cli ``` **简介：项目搭建初始化配置** - `rem` 适配 - - 安装 ``` yarn add postcss-pxtorem@5.1.1 amfe-flexible -S ``` 1. amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。 2. postcss-pxtorem postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。 - 文件配置 ```js // vue.config.js module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16 , propList: ['*']}), ], }, }, }, }; ``` - 引入 ``` // main.js ``` ``` import 'amfe-flexible'; ``` - `less` 预处理器 - 安装 ``` yarn add less less-loader@7 -S ``` - `vant` 组件库的引入 - 安装 yarn add i vant@next -S - 全局使用 ```js import { createApp } from 'vue'; // 1. 引入你需要的组件 import { Button } from 'vant'; // 2. 引入组件样式 import 'vant/lib/index.css'; const app = createApp(); // 3. 注册你需要的组件 app.use(Button); ``` - 按需使用 1. 安装插件 yarn add unplugin-vue-components -D 2. 配置插件（在vue-cli的项目中） ```js const { VantResolver } = require('unplugin-vue-components/resolvers'); const ComponentsPlugin = require('unplugin-vue-components/webpack'); module.exports = { configureWebpack: { plugins: [ ComponentsPlugin({ resolvers: [VantResolver()], }), ], }, }; ``` - 使用组件 ```js <template> <van-button type="primary" /> </template> ``` - base.less ```less html, body { padding: 0; margin: 0; background-color: #f5f5f5; } html, body, #app { height: 100%; } textarea { border: none; outline: none; } button { border: none; outline: none; } a { text-decoration: none; color: #333; } li { list-style-type: none; } ``` # 首页数据 ```js { big_sort: [ { name: "美食", icon: "icon-meishi", }, { name: "甜点饮品", icon: "icon-tiandian", }, { name: "超市便利", icon: "icon-chaoshigouwu", }, { name: "生鲜果蔬", icon: "icon-shengxian-ganju", }, { name: "买药", icon: "icon-zhichiyiyuanyaodian", }, ], small_sort: [ { name: "午餐", icon: "icon-wucan", }, { name: "买酒", icon: "icon-jiu", }, { name: "新鲜水果", icon: "icon-xinxianguoshu_xinxianshuiguopingguo", }, { name: "汉堡披萨", icon: "icon-hanbaopisa", }, { name: "休闲饮品", icon: "icon-xiuxianyinpin", }, { name: "夜宵", icon: "icon-yexiao", }, { name: "吐司", icon: "icon-tusi", }, { name: "跑腿", icon: "icon-paotuiAPP", }, { name: "美人佳丽", icon: "icon-kouhong", }, { name: "全部分类", icon: "icon-fenlei", }, ], centent_nav_list: [ { tab: "天天神券", data: [ { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, { pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc", title: "隆江猪脚饭", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, ], }, { tab: "减配送费", data: [ { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, ], }, { tab: "点评高分", data: [ { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, ], }, { tab: "会员满减", data: [ { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, { pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440", title: "酸菜鱼", sales: "2888", price: "20", label: ["门店上新", "很下饭"], }, ], }, ], } ``` # header的样式 ```css .header { background-color: #fff; height: 40px; font-size: 20px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #d7d7d7; .edit { font-size: 16px; position: absolute; right: 15px; font-weight: normal; } .icon { position: absolute; left: 10px; } } ``` # 店铺的样式 ```css .storeDetails { height: 100%; display: flex; flex-flow: column; .content { flex: 1; overflow-y: auto; .img { background: url("../../assets/yuna.jpg") no-repeat center/cov