我們首先制作前臺。

首先通過vue-cli初始化一個開發(fā)環(huán)境。

1. 在D盤根目錄新建Workbench文件夾
2. 在Workbench文件夾下 【右邊shift+右鍵】選擇打開命令行。
   或者打開命令行后D: 回車 cd D:\WorkBench 也可
3. 命令行下輸入vue init webpack Vdmin
   然后它提示你工程名可寫vdmin，描述可寫vue-admin，vue-route暫時不用， eslint可用（模式可選air）
   單元測試和e2e就不要了吧,然后

cd my-project
npm install

（新版的vue-cli可選擇自動執(zhí)行這兩行命令）
安裝完成后，用vs code 打開目錄D:\WorkBench\Vdmin
在【終端窗口】運(yùn)行npm run dev

命令行窗口.PNG

一番提示后，用瀏覽器打開 http://localhost:8080 顯示vue的頁面，OK！

然后安裝elementUI

1. 新建【終端窗口】，輸入 npm i element-ui -S
2. 修改 ./src/main.js文件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';

Vue.config.productionTip = false;
Vue.use(ElementUI);

引入axios作為通訊工具

【終端窗口】，輸入 npm i axios

頁面設(shè)計(jì)

• 使用elementUI布局

<template>
  <el-container id="app">
  <el-header height="80px">Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>
      </el-main>
      <el-footer height="80px">Footer</el-footer>
    </el-container>
  </el-container>
</el-container>
</template>

<style>
html,body{
    height: 100%;
    overflow: hidden;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  height: 100%;
}

.el-main {
  overflow: auto;
}

.el-container {
  overflow: auto;
}
</style>

這樣一個大致的管理頁面框架就出來了

頁面框架.jpg