操作示例

1. 修改配置，设置业务接口

// nuxt.config.js
// 请修改成-实际业务后端接口，例：BASE_API = '/template-api'
let BASE_API = ''

2. 创建页面（例）

pages/table.vue

3. 编写API请求

api/table.js

import request from '~/plugins/request'
const groupName = 'table'

/**
 * 获取列表
 * @param query
 */
export const ApiGetTableList = (query) => {
  return request({
    url: `${process.env.BASE_API}/${groupName}/page`,
    method: 'GET',
    params: query
  })
}

/**
 * 新增
 * @param query
 */
export const ApiAddUser = (query) => {
  return request({
    url: `${process.env.BASE_API}/${groupName}/add`,
    method: 'POST',
    data: query
  })
}

/**
 * 编辑
 * @param query
 */
export const ApiUpdateUser = (query) => {
  return request({
    url: `${process.env.BASE_API}/${groupName}/update`,
    method: 'PUT',
    data: query
  })
}

/**
 * 删除
 * @param query
 */
export const ApiDeleteUser = (query) => {
  return request({
    url: `${process.env.BASE_API}/${groupName}/delete`,
    method: 'DELETE',
    params: query
  })
}

提示：暂无后端接口时，可开启模拟接口

server/index.js

// 模拟接口
const mockserver = require('./mockserver')
mockserver()

开启代理

nuxt.config.js

    // 业务接口代理
    '/api': {
      target: 'http://127.0.0.1:3001', // 模拟接口
      // target: SERVER_URL, // 若是本地后端调试，可修改此处
      changeOrigin: true, // 是否跨域
      pathRewrite: {
        '^/api': '' // 把 /api 替换
      }
    }