博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用vue2.0 + vue-router + vuex + element-ui实现的后台管理系统
阅读量:6436 次
发布时间:2019-06-23

本文共 991 字,大约阅读时间需要 3 分钟。

有登录注册(含登录状态管理),角色权限管理,表格分页,图表显示等。

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

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

初始化项目

全局安装 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,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

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

图片描述

图片描述

转载地址:http://lohga.baihongyu.com/

你可能感兴趣的文章
Windows 7平台安装Oracle Client 10g版本时需要做的一点变更
查看>>
Oracle Online Redefinition在线重定义(下)
查看>>
扩展GridView控件——为内容项添加拖放及分组功能
查看>>
qsort()与sort的用法(收藏)
查看>>
★电车难题的n个坑爹变种
查看>>
企业如何走出自己的CRM非常之道?
查看>>
整合看点: DellEMC的HCI市场如何来看?
查看>>
联合国隐私监督机构:大规模信息监控并非行之有效
查看>>
韩国研制出世界最薄光伏电池:厚度仅为人类头发直径百分之一
查看>>
惠普再“卖身”,软件业务卖给了这家鼻祖级公司
查看>>
软件定义存储的定制化怎么走?
查看>>
“上升”华为碰撞“下降”联想
查看>>
如何基于Spark进行用户画像?
查看>>
光伏发电对系统冲击大 “十三五”电力规划重点增强调峰能力
查看>>
全球19家值得关注的物联网安全初创企业
查看>>
Android下的junit 单元测试
查看>>
这几个在搞低功耗广域网的,才是物联网的黑马
查看>>
主流or消亡?2016年大数据发展将何去何从
查看>>
《大数据分析原理与实践》一一第3章 关联分析模型
查看>>
《挖掘管理价值:企业软件项目管理实战》一2.4 软件设计过程
查看>>