vue-admin-template使用路由和mockjs进行二次开发

最近在研究vue-admin-template模板，准备对他做二次开发，其中必须要经历的步骤就是创建路由和请求mock假数据了，下面是我写的一个商品页面，所有的数据都是利用Mockjs随机生成的，现在简单说一下我的编写步骤和思路，给刚开始接触vue-admin的小伙伴们学习嘻嘻。

如果对这个模板不熟悉的话建议先阅读一下官方文档

1.首先我们在views下新建一个product文件夹，然后在里面新建一个index.vue，官方文档说了，侧边栏是动态生成的，所以我们只需要在路由表里添加一个路由

2.进入router/index.js，添加一个路由，我把它当作子路由添加到Example中

    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {                     // 添加一个子路由
        path: 'product',    // 路径
        name: 'Product',    // 路由的名字
        component: () => import('@/views/product/index'),  // 导入
        meta: { title: 'Product', icon: '' }     // title表示网页标题，icon是显示在侧边栏的图标，这里先不写
      }

3.编写mockjs，在mock和api文件夹下分别新建一个product.js文件

这两个文件都可以复制他们同级目录下的table.js文件，因为里面的内容差不多是一样的，只需稍微修改一下，如上面的url路径要改成和product相关的，这样api下的product.js就完成了
再把mock下的table.js复制到mock下的product.js，然后把数据改成我们需要生成的数据，具体用法见mockjs官网，代码如下

import Mock from 'mockjs'

const data = Mock.mock({
  'items|10': [{                          // 生成10个数组
    id: '@id',
    pid: '@integer(1000, 1100)',          // 生成一个1000-1100之间的整数
    name: '@name',                        // 生成一个英文名字，cname为中文名字
    description: '@csentence(10, 20)',    // 生成一句中文
    price: '@integer(10,100) $',
    edit: '',
    value: '@float(2,4)',                // 生成一个2-5之间的浮点数
    display_time: '@datetime',           // 生成一个日期
    sales: '@integer(300, 5000)'
  }]
})

export default [
  {
    url: '/vue-admin-template/product/list',   // 路径记得要改
    type: 'get',
    response: config => {
      const items = data.items
      return {
        code: 20000,
        data: {
          total: items.length,
          items: items
        }
      }
    }
  }
]

你以为这样就配置完啦？并不是，这时候你会发现export default是灰色的，说明它还没有被引用，还有一个地方需要导入它，聪明的你应该猜到了，打开mock文件夹下的index.js，加入两行代码

然后回到product.js就会发现export default亮起来啦

4.然后再回到views文件夹下把我们的页面完善一下，话不多说，直接把table下的index.vue复制到product下的index.vue中，只需要改lable和{{ }}中的内容，根据自己的需求写就ok了

最后我把我的product的index.vue代码分享给大家，祝小伙伴们学习愉快！