本文共 2171 字，大约阅读时间需要 7 分钟。

效果

目录结构

├── README.md├── build│   ├── build.js│   ├── check-versions.js│   ├── logo.png│   ├── utils.js│   ├── vue-loader.conf.js│   ├── webpack.base.conf.js│   ├── webpack.dev.conf.js│   └── webpack.prod.conf.js├── config│   ├── dev.env.js│   ├── index.js│   └── prod.env.js├── index.html├── package-lock.json├── package.json├── src│   ├── App.vue│   ├── assets│   │   └── logo.png│   ├── components│   │   ├── HelloWorld.vue│   │   ├── header.vue│   │   ├── home.vue│   │   └── leftBanner.vue│   ├── main.js│   ├── router│   │   └── index.js│   └── views│       ├── active.vue│       ├── listOrder.vue│       ├── newOrder.vue│       ├── system.vue│       └── user.vue└── static

实现方法：

第一步：使用vue-cli 脚手架初始化项目文件，具体步骤参考

第二步：封装头部、侧边栏和公共容器组件

头部：用户信息等

第三步：内容页面

│   └── views│       ├── active.vue│       ├── listOrder.vue│       ├── newOrder.vue│       ├── system.vue│       └── user.vue

第四步：路由

使用children来区分路由地址

import Vue from 'vue'import Router from 'vue-router'import home from '@/components/home'import listOrder from '@/views/listOrder'import newOrder from '@/views/newOrder'import active from '@/views/active'import system from '@/views/system'import user from '@/views/user'Vue.use(Router)export default new Router({
     routes: [    {
         path: '/',      redirect: '/listOrder'    },    {
         path: '/',      name: 'home',      component: home,      children: [        {
             path: '/listOrder',          name: 'listOrder',          component: listOrder        },        {
             path: '/newOrder',          name: 'newOrder',          component: newOrder        },        {
             path: '/active',          name: 'active',          component: active        },        {
             path: '/system',          name: 'system',          component: system        },        {
             path: '/user',          name: 'user',          component: user        }      ]    }]})

项目地址：

转载地址：http://vkhbb.baihongyu.com/