Vue之项目使用

列表组件

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
</template>

拦截-请求组件

//拦截器组件
import { axios } from '@/utils/request'

script-页面数据加载及方法处理

export default {
    name: 'one',
    data() {
        return {
            tableData: []
        }
    },
    //生命周期
    mounted() {
        this.getOneList()
    },
    methods: {
        getOneList() {
            axios({
                url: '/one/list',
                method: 'get'
            }).then(res => {
                debugger
                this.tableData = res.data
            })
        },
    }
}

mock.js中设置请求返回对象。

Mock.mock('/api/one/list', 'get', () => {
    return  {
        msg: 'success',
        message: 'success',
        code: 0,
        status: 0,
        data: [
            {
                title: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }
        ]
    }
})

真实项目中设计权限及路由
permission.js--权限部分

const whiteList = ['/login', '/test', '/one']

index.js --路由部分

{
        path: '/one',
        name: 'one',
        hide: true,
        component: () => import('../views/one.vue')
    },