Vue 实现仿美团外卖APP的总结

一、前言

项目源自网上一个Vue项目。原项目是基于Vue Cli 2 并且采用了UI组件库。为了练手，我采用原生CSS写样式，然后自己进行了响应式设计。后台应用我是直接拿来用的，后期复习到Node的时候我会自己来做一遍。我做这个项目最重要的目的是把学过的理论知识实践一下，虽然当前还有一些bug还没修复，但是我想先把做过的东西总结一下。

前端项目地址：vue-shop
后端项目地址：vue-shop-server

当前完成的功能展示如下：

当前bug待解决：

• 浏览器首次打开手机模拟器时，首页swiper以及better-scroll都无法滑动，刷新后就没事了，而我在自己的手机Chrome浏览器测试完全正常。

• 内置浏览器版本过低，打开失败。

功能待完善：

• 搜索列表显示。
• 订单组件显示购物车食物。

下面会挑选我觉得项目中比较重要的地方来讲解。

二、使用Vue Cli 3构建项目

项目启动了半个月后，我发现低版本包传到Github上面后有安全问题，于是我决定将原来的版本更新到 Vue Cli 3，这里采用图形界面的方式创建新项目。

vue ui

环境的搭建我相信大家看过很多文章了，所以我不再赘述。创建项目过程中，会让你选一些工具，它们可以集成到项目中去，我选的是：

• Babel
• Vuex
• Router
• CSS Pre-processors（CSS预处理器）

然后下一步选择预处理器类型，代码风格采用哪种模式，是否使用history模式的路由，最后选择什么时候自动修复错误格式的代码，我的选择如下：

点击创建项目后，稍等片刻就好啦。然后你此次的配置会保存一个预设，你下次再次创建的时候就可以使用这个预设了。我简单介绍一下脚手架的目录。

这款风格是带有分号的，如嫌麻烦可以在刚开始创建项目的时候选择标准模式（standard）。

三、项目配置

注意：本文提及的所有模块的已经默认安装好了。

3.1 环境变量配置

项目启动的时候不同的环境会载入不同的环境变量。官方提供了以下几种方式来载入环境变量：

.env   # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 在特定环境下载入，由mode决定
.env.[mode].local # 在特定环境下载入，由mode决定，但会被 git 忽略

被指定模式的环境变量比没有指定的优先级要高，但如果脚手架工具启动时已经存在一个环境变量，它将用有最高优先级。那他们的环境是如何确定的呢？

脚手架工具中在process.env中已经定义好了一个环境变量NODE_ENV。我们可以在package.json中的script属性中指定--mode参数来指定NODE_ENV的值从而确定一个模式，比如我们指定一个alpha模式：

"script": {
   
	"alpha": "vue-cli-service build --mode test"
}

脚手架工具已经集成了三种模式：development、production、test，通过运行以下命令来启动不同环境，然后加载.env.*文件载入环境变量：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

下面是我项目中的脚本命令：

这三种环境其实已经能满足我们日常开发需求了。项目根目录下我创建了三个文件来载入不同环境的变量：

环境变量命名的风格也是有规定，它是一种键-值的结构，而且最好是VUE_APP_开头，因为如果你在配置文件中使用的话，不是以VUE_APP_开头的变量就不会载入。

我在development环境中定义了两个环境变量：

VUE_APP_BASE = "http://localhost:4000/" # 代理服务器地址
VUE_APP_IMAGE = "https://fuss10.elemecdn.com" # 图片地址

大家可以根据自己的实际开发需求来定义，我为了方便就只模拟了development环境。

3.2 vue.config.js 配置

Vue cli 3 创建的项目会集成一些常见的webpack配置，但是有时候我们还是要自己去配置一些选项，官方提供了vue.config.js，它会在项目启动的时候加载。

我主要配置了三个地方，其他的配置大家可以参考官方文档。

• 配置全局的stylus样式
• 配置别名（alias）
• 配置代理（proxy）

const path = require('path')

function resolve(dir) {
   
  return path.join(__dirname, dir)
}

// 全局mixins.styl样式
function addStyleResource(rule) {
   
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
   
      patterns: [resolve('src/assets/styles/stylus/index.styl')]
    })
}

module.exports = {
   
  lintOnSave: process.env.NODE_ENV !== 'production', // 开发环境保存时开启代码检查
  productionSourceMap: false, // 生产环境下关闭SourceMap
  chainWebpack: config => {
   
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type =>
      addStyleResource(config.module.rule('stylus').oneOf(type))
    )
    config.resolve.alias
      .set('styles', resolve('src/assets/styles'))
      .set('images', resolve('src/assets/images'))
      .set('components', resolve('src/components'))
  },
  devServer: {
   
    proxy: {
   
      '/': {
   
        target: process.env.VUE_APP_BASE, // 代理地址
        changeOrigin: true // 是否支持跨域
      }
    }
  }
}

3.3 代码风格和约束

不同的团队有不同的规范，这里是我自己个人比较喜欢的代码风格，以后同团队协作开发的时候还是要向团队看齐的。

3.3.1 eslint + prettier配置

有两种方式来创建eslint配置：

• 内置注释
• 创建.eslintrc.*文件或在package.json中的eslintConfig属性中配置

我选择的是后者。

 "eslintConfig": {
   
    "root": true, // 将ESLint限制在当前项目，不再向上查找配置
    "env": {
   
      "node": true // 指定node环境，使用该环境下全局变量的预设
    },
    "extends": [
      "plugin:vue/essential", // 使用vue插件
      "@vue/prettier", // prttttier 预设
      "eslint:recommended" //使用eslint推荐的规则
    ],
    "rules": {
    // 拓展或者覆盖默认规则
      "prettier/prettier": [
        "error", //被prettier标记的地方抛出错误信息。
        {
   
          "tabWidth": 2, // 几个缩进空格
          "useTabs": false, // 是否使用tab缩进
          "semi"