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

首先 新建一个 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': ''
               }
           }    
       }    
   }

配置目录文件