了解全新的项目中使用假数据mock1.mock使用场景 mock：假的前端程序员提到的mock数据的含义是：真的假数据

1.mock使用场景

mock：假的

前端程序员提到的mock数据的含义是：真的假数据

真的：符合接口规范要求的。
假数据：数据是人为创建出来的，不是真正的业务数据。

什么时候需要mock

后端接口的开发速度跟不上前端的进度，而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据，保证业务能正常开发

2.mock的实现方式

本地启mock服务器：

自己用express写接口
本地用专门的mock服务

线上的mock服务器

www.fastmock.site/
mock 的功能是真的假数据；
可以在本地自己写接口，也可以采用web接口；

3.使用项目中的mock功能

第一步：拷贝`/mock`

在mock目录下创建一个news.js文件

其中的news.js,table.js根据情况来定

第二步：在vue.config.js中配置`devServe`

'use strict'

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    port: 8001,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js') // 重点
  }
}

第三步：设置环境变量

不是必须的。

文件中，特别设置VUE_APP_BASE_API这一项，它在mock文件中使用到了，如果不设置，则它的值就是undefined

第四步：发请求

const url = "/api/news/list"  
// /api： VUE_APP_BASE_API的值
// news/list: mock文件下，news.js中定义的接口地址

axios({url}).then(res => {console.log(res)})

了解全新的项目中使用假数据mock