使用vue2.0 + vue-router + vuex + element-ui实现的后台管理系统

有登录注册（含登录状态管理），角色权限管理，表格分页，图表显示等。

登录账号有三个，分别是：admin,supplier,buyers；密码全部是：123456 。三个账号也是三个不同的角色，分别是：管理员，供货商，采购商。三种不同角色的登录会进入不同的界面，同时三种不同角色登陆后无法互相访问别的角色的界面。

详细实现教程，完整源码以及在线演示的地址：

使用vue2.0 + vue-router + vuex + element-ui实现的后台管理系统

初始化项目

全局安装 vue-cli

npm install --global vue-cli

新建一个文件夹works，使用终端进入该文件夹，输入下面的命令：

vue init webpack vueyiyao

此时创建了一个基于 webpack 模板的新项目，继续输入：

cd vueyiyao
# 安装依赖
npm install
# 启动本地服务器
npm run dev

此时浏览器将打开vue的欢迎页面，也就是基于 webpack 模板的项目页面

安装需要的依赖包

在vueyiyao目录下，使用终端运行如下命令：

# 安装element-ui（基于vue的UI框架）
npm i element-ui -S
# 安装axios(AJAX与后台交互数据)
npm install axios -s
# 安装vuex（基于vue的状态管理模式）
npm install vuex -S
# 安装echarts（图表显示）
npm install echarts --save

依赖简介：
element-ui是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。

axios是一个基于 promise 的 HTTP 库，主要是AJAX功能。

vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

贴两张图片出来，更多界面和功能请直接进行在线演示发掘。