我们首先制作前台。
首先通过vue-cli初始化一个开发环境。
- 在D盘根目录新建Workbench文件夹
- 在Workbench文件夹下 【右边shift+右键】选择打开命令行。
或者打开命令行后D:回车cd D:\WorkBench也可 - 命令行下输入
vue init webpack Vdmin
然后它提示你工程名可写vdmin，描述可写vue-admin，vue-route暂时不用， eslint可用（模式可选air）
单元测试和e2e就不要了吧,然后
cd my-project
npm install
（新版的vue-cli可选择自动执行这两行命令）
安装完成后，用vs code 打开目录D:\WorkBench\Vdmin
在【终端窗口】运行npm run dev
命令行窗口.PNG
一番提示后，用浏览器打开 http://localhost:8080 显示vue的页面，OK！
然后安装elementUI
- 新建【终端窗口】，输入
npm i element-ui -S - 修改 ./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
页面设计
- 使用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
