我们首先制作前台。
首先通过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布局
Header
Aside
Footer
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;
}
这样一个大致的管理页面框架就出来了
页面框架.jpg