梳理一下常规管理系统的结构

首先 新建一个 vue 项目 (这里用的是 vue-cli4.4.5)
目录结构选择最简单的, 不带路由，方便梳理结构。
写一个简版的，然后每一个过程再在其他的文章里面写细节。

新建一个 vue.config.js 于根目录。

配置 alias：（写在 vue.config.js 里面~~~~）

const path = require('path'); // 引入 path 包
 const resolve = dir => path.join(__dirname, dir);
// 这边表示 resolve 方法返回以此文件为参照的路径

module.exports = {
    configureWepack: {
        alias: {'src': resolve('./src')
        }    
    }
}

这里就简单配置一个 src 的路径

配置路由:
新建一个空白页, 写在 src 的 components。

import Vue from 'vue';
import VueRouter from 'vue-router';

export const routes = [{path: '/', show: true, component: () => import('src/components/full')}
    ]
];
Vue.use(VueRouter);
export default new VueRouter({mode:'history', routes});

这段话的意思比较简单，首先，export 一个 routes，作为路由的配置，同样也用于菜单的配置（这边多写一点，方便待会儿的目录配置）。

然后就是填充 full 页面。
full 页面，一般情况下分为四个部分。header ,footer ,menu, body

先在 components 下面创建一个 header，footer, menu 页面。
full 的 简版代码

<template>
   <div>
       <Header/>
       <menu/>
       <footer/>
   </div>
</template>
 import header from 'src/components/header';
 import footer from 'src/components/footer';
 import menu from 'src/components/menu'
 export default {name: 'full'}

配置反向代理，写在 vue.config.js

   devServer: {
       proxy: {
           '/api': {
               target: 代理地址,
               changeOrigin: true,
               pathRewrite: {'^/api': ''}
           }    
       }    
   }

配置目录文件