1、编写请求函数
    在api>user.js文件中编写接口

    1. // 接口地址
    2. const url = "http://192.168.0.1:3333"
    3. // data为请求接口所带参数
    4. export const getUserList = (data) => request({
    5.     url: url + "/user"
    6.     method:"post",
    7.     data:data
    8. })

    2、编写Avue表格
    打开Avue官方文档https://avuejs.com/ 进入周边生态，CRUD表格设计器
    image.png
    image.png
    导出JSON：
    JSON中的column为单元格配置。就是表格的列。
    image.png

    1. {
    2.   "tip": "true",
    3.   "index": "true",
    4.   "selection": "false",
    5.   "border": "true",
    6.   "expand": "false",
    7.   "headerAlign": "center",
    8.   "align": "center",
    9.   "menu": "true",
    10.   "menuAlign": "center",
    11.   "menuType": "button",
    12.   "dialogType": "dialog",
    13.   "dialogFullscreen": "false",
    14.   "dialogEscape": "true",
    15.   "dialogModal": "true",
    16.   "dialogClickModal": "true",
    17.   "dialogCloseBtn": "true",
    18.   "addBtn": "true",
    19.   "editBtn": "true",
    20.   "viewBtn": "false",
    21.   "delBtn": "true",
    22.   "saveBtn": "true",
    23.   "updateBtn": "false",
    24.   "cancelBtn": "true",
    25.   "searchBtn": "false",
    26.   "refreshBtn": "true",
    27.   "filterBtn": "false",
    28.   "printBtn": "false",
    29.   "excelBtn": "false",
    30.   "columnBtn": "false",
    31.   "column": []
    32. }

    3、进入工程，在mock文件中新建user.js文件
    写入代码：

    1. import Mock from 'mockjs'
    2. export default ({
    3.     mock
    4. }) => {
    5.     if (!mock) return;
    6.     Mock.mock('/users/list', 'get', {
    7.         "option": [{
    8.             tip: true,
    9.             index: true,
    10.             selection: false,
    11.             border: true,
    12.             expand: false,
    13.             headerAlign: "center",
    14.             align: "center",
    15.             menu: true,
    16.             menuAlign: "center",
    17.             menuType: "button",
    18.             dialogType: "dialog",
    19.             dialogFullscreen: false,
    20.             dialogEscape: true,
    21.             dialogModal: true,
    22.             dialogClickModal: true,
    23.             dialogCloseBtn: true,
    24.             addBtn: true,
    25.             editBtn: true,
    26.             viewBtn: false,
    27.             delBtn: true,
    28.             saveBtn: true,
    29.             updateBtn: false,
    30.             cancelBtn: true,
    31.             searchBtn: false,
    32.             refreshBtn: true,
    33.             filterBtn: false,
    34.             printBtn: false,
    35.             excelBtn: false,
    36.             columnBtn: false,
    37.             column: [
    38.                 {
    39.                     label: 'ID',
    40.                     prop: 'id',
    41.                     type: 'input',
    42.                 },
    43.                 {
    44.                     label: '姓名',
    45.                     prop: 'name',
    46.                     type: 'input',
    47.                 },
    48.                 {
    49.                     label: '年龄',
    50.                     prop: 'age',
    51.                     type: 'input',
    52.                 }
    53.             ]
    54.         }]
    55.     });
    56. }

    4、进入mock文件的index.js，导入users，将mock设置为true

    1. import user from './user';
    2. import menu from './menu';
    3. import crud from './crud';
    4. // 导入users
    5. import users from './users'
    6. /**
    7.  * 模拟数据mock
    8.  * 
    9.  * mock是否开启模拟数据拦截
    10.  */
    12. user({ mock: true });
    14. menu({ mock: true });
    16. crud({ mock: true });
    17. // 设置为true
    18. users({ mock: true });

    5、进入views，新建users文件夹，在users文件夹中新建index.vue
    略。
    6、发起请求后将会在浏览器的控制台看到请求数据。并赋值。具体操作看代码
    **