外卖APP项目—No.2项目准备

外卖APP项目—No.2项目准备

本文重点跟大家介绍外卖APP项目的准备工作，主要包括四部分：项目资源准备、图标字体制作、项目目录设计和mock数据。废话不多说，正文马上开始！

项目资源准备

项目资源主要包括页面设计稿、图片、图标字体等资源。具体可以去本人GitHub的resource文件夹中找到。
资源链接

图标字体制作

• 制作图标字体可以访问icomoon这个网站，选择右上角IcoMoon APP按钮，进入免费图标字体选择界面。
  
• 免费图标字体选择界面，可以选择自己需要的图标字体，然后点击右下角的Generate Font按钮，生成图标字体，进入图标字体下载界面，在该界面可以看到自己选择的所有图标字体
  
• 图标字体下载界面，可以下载自己需要的图标字体，然后点击右下角的Download按钮，下载图标字体
  

项目目录设计

• 组件放在components目录下，需要注意的是，每一个组件都需要单独放在一个子目录下，这样做的好处是符合组件“就近维护”的原则，可以将组件用到的图片等其他资源统一放在同一个子目录下，方便维护
• 在src目录下，新建common子目录，用于存放一些公共资源，在common目录下新建三个子目录，分别是stylus、js、font
• 将下载的图标字体文件中fonts目录下的文件全部复制到font文件夹下，将图标字体文件中的style.css放在stylus文件夹下，并将文件名改为icon.styl，将文件中的花括号和分号全部删除。
• 将assets文件夹删除
  

mock数据

• 把静态数据文件data.json放入 public 文件下。

// 静态数据存放的位置
public/mock/data.json

• 启动项目后，访问http://localhost:8080/mock/data.json看看数据能不能正常被访问。
  
• 修改根目录下的 vue.config.js 文件配置

  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,pathRewrite: {'^/api': '/mock'}}}}
  })
  

• 配置完成之后，在项目中直接访问数据即可。（记得提前安装axios哦）

  axios.get('/api/data.json').then((res) => {console.log(res.data)
  })
  

浏览器控制台查看请求结果：