一. 项目介绍

项目模仿的是支付宝首页-饿了么界面的大部分功能。
使用的是Vue2，VueCli3脚手架。
我们使用Mint UI。我们都知道饿了么大前端团队出的Element-UI是用于PC端的UI组件库，Mint UI也是饿了么大前端团队出的基于Vue.js的移动端组件库，但是已经停止维护了。
短信使用的是聚合数据。
地图使用的是高德地图API。

二. 如何运行项目

项目地址：Vue2+Cli3实战项目-还原饿了么订餐app

安装vue脚手架
终端执行vue ui打开vue可视化面板
导入项目，点击serve - 运行即可

项目截图：

二. 项目使用的依赖包

1 - cnpm

我们使用npm安装一些包的时候可能会比较慢，这时候我们可以使用cnpm，cnpm是中国 NPM 镜像。

cnpm是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为10分钟一次以保证尽量与官方服务同步。

你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm：

$ sudo npm install -g cnpm --registry=https://registry.npmmirror.com

使用cnpm -v命令，如果可以看到版本号，说明安装成功。

注意： cli2运行项目使用的命令是npm run dev，cli3运行项目使用的命令是npm run serve。
Vue和Vue CLI的对应关系： Vue CLI 4.5以下，对应的是Vue2。 Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2。

2 - reset.css

引入reset.css干掉margin和border。

3 - axios

安装axios，用于数据请求，安装命令：

npm install axios --save

4 - better-scroll

原来是因为盒子的高度超出屏幕了，所以会有滚动效果，它只是超出屏幕了，我们并没有添加实际滚动的东西，我们可以设置height: 100%，然后使用better-scroll实现滚动，安装方式如下：

npm install better-scroll --save

5 - Mint UI

安装Mint UI框架：

npm install mint-ui --save

6 - qs

如果报错如下：

需要安装qs，命令如下：

npm install qs --save

然后在axios请求拦截器中使用：

// 请求拦截
axios.interceptors.request.use(
  config => {
    // 如果是post请求,把对象类型的参数转成name=lisi&这种格式的字符串
    if (config.method == 'post') {
      config.data = qs.stringify(config.data);
    }

    // 添加loading
    Indicator.open();
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Vue2+Cli3实战项目-饿了么