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

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

配置目录文件