仿美团外卖开发笔记一(vue3.0版本，主要记录思路)记录学习思路。哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或

需要开发的页面：首页、购物车、订单、个人中心、店铺、生成订单、地址管理、编辑地址、新增地址、账号管理、注册、登录

主要功能点：店铺商品的加入购物车功能、商品的下单功能、用户地址管理功能、账号管理功能、注册登录功能

1.项目开发搭建与配置

创建Vue脚手架（选择vue3.0版本进行开发）

 vue create xxx

这里需要进行一些移动端开发配置，请参考我的另一篇文章：

2. 路由配置

安装
cnpm i vue-router@4 -S

四个主页面(首页、购物车、订单、个人中心)分别对应四个路由路径
(src/views/ 分别创建四个文件夹，分别对应这四个主页面，在文件夹中创建.vue文件)

新建路由配置文件

```
// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';


const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      component: () => import('../pages/MyHome'),
    },
    {
      path: '/cart',
      component: () => import('../pages/MyCart'),
    },
    {
      path: '/me',
      component: () => import('../pages/MyMessage'),
    },
    {
      path: '/order',
      component: () => import('../pages/MyOrder'),
    },
  ],
});


export default router;
```

引入


// main.js
import router from './router/index';


const app = createApp(App);
app.use(router);
app.mount('#app');

使用

```

// App.vue
<router-view></router-view>
```

```
// Footer.vue(复用组件，在components文件下创建)
<div><router-link to="/home">首页</router-link></div>
<div><router-link to="/cart">购物车</router-link></div>
<div><router-link to="/order">订单</router-link></div>
<div><router-link to="/mine">我的</router-link></div>
```

3.首页开发

首页.png

分为头部、内容、底部三个部分

详情请参考代码进行页面分析。主要是将数据渲染到页面上，和一些布局问题。