85423468 2019-06-25
有登录注册(含登录状态管理),角色权限管理,表格分页,图表显示等。
登录账号有三个,分别是: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,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
贴两张图片出来,更多界面和功能请直接进行在线演示发掘。
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT