一、启动
 

npm install
npm run dev

二、项目结构

 三、新增页面

在views文件夹下新增vue页面文件或者【文件夹order->在文件夹内新增vue页面】，如index.vue，模板代码如下

<template>
    <div class="app-container a">
               全部订单
    </div>
</template>

<script>
export default {
    name:"a"
}
</script>

<style lang="scss" scoped>

</style>

四、在Router->index.js文件中新增路由

情况一：只有一个主标题

{
    path: '',
    component: Layout,
    redirect: 'index',
    children: [
      {
        path: 'index',
        component: (resolve) => require(['@/views/index'], resolve),
        name: '我的工作台',
        meta: { title: '我的工作台', icon: 'dashboard', noCache: true, affix: true }
      }
    ]
  },

情况二：有下拉，展开选项只显示1个子标题

{
    path: '/order',
    component: Layout,
    hidden: false,
    redirect: 'index',
    alwaysShow:true,
    meta: { title: '订单管理', icon: 'user' },
    children: [
      {
        path: 'index',
        component: (resolve) => require(['@/views/order/index'], resolve),
        name: '全部订单',
        meta: { title: '全部订单', icon: 'dashboard' }
      },
    ]
  },

path后面是文件夹名字；

alwaysshow:true用来控制只展示下拉只有一个子菜单的情况，不加这句话，不显示下拉效果，只展示下拉的选项，不显示标题，没有折叠效果。

第一个meta的内容是主标题

children里的内容是下拉的内容，里面的name和title要对应，require是页面路径

情况三：有下拉，展开选项有多个子标题

{
    path: '/quote',
    component: Layout,
    hidden: false,
    redirect: 'noredirect',
    meta: { title: '报价管理', icon: 'user' },
    children: [
      {
        path: 'quote',
        component: (resolve) => require(['@/views/quote/quote'], resolve),
        name: '待报价',
        meta: { title: '待报价', icon: 'user' }
      },
      {
        path: 'quoted',
        component: (resolve) => require(['@/views/quote/quoted'], resolve),
        name: '已报价',
        meta: { title: '已报价', icon: 'user' }
      }
    ]
  },

 

五：访问

xxxxx/文件夹名/文件名

http://192.168.1.102/quote/quoted