项目全面更新 https://segmentfault.com/a/11...

前言

项目前端地址: https://github.com/lmxdawn/vu...

项目后端地址: https://github.com/lmxdawn/vu...

欢迎大家的star

20180519 更新

这次加了一个通宵班, 没办法强迫症。

  • 1.增加文件上传插件,主要用于管理后台的资源,之前我们运营是每次都要去上传文件,而有了这个插件管理,就可以不用上传重复的资源。上传插件实现了把汉字自动转成拼音(都知道中文路径时不友好的)。现目前上传的文件没有用数据库来管理,而是直接用获取文件的形式,也是偷懒,有时间再实现吧。

废话不多说,贴图

20180428 更新

  • 1.增加 mock 模拟数据。注意(改为API接口数据时一定要把 main.js 里面引入的 mock.js 删掉)
  • 2.增加左侧导航栏的左右收折功能,特别注意一点就是 由于 element-ui 的导航菜单的原因,在el-submenu 外层加了 div 时,收折就隐藏不了文字,所以要自己加上 css 样式,放在 base.scss 下面
// 左侧导航栏的折叠后的样式
.slide-hide {.el-menu--collapse {.el-submenu {.el-submenu__title {span {height: 0;width: 0;overflow: hidden;visibility: hidden;display: inline-block;}.el-submenu__icon-arrow {display: none;}}}.el-menu-item {.el-tooltip {span {height: 0;width: 0;overflow: hidden;visibility: hidden;display: inline-block;}}}}
}

效果如下:

PC版

手机版

功能

  • [x] 管理员登录
  • [x] 登录
  • [x] 修改密码
  • [x] 角色管理
  • [x] 权限管理
  • [x] 401/404错误页面
  • [x] 动态面包屑
  • [x] 动态侧边栏

安装步骤

git clone https://github.com/lmxdawn/vue-admin-html.git      // 把模板下载到本地
cd vue-admin-html    // 进入模板目录
npm install         // 安装项目依赖,等待安装完成之后

本地开发

// 开启服务器,浏览器访问 http://localhost:8080
npm run dev

构建生产

// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build

用到的东西

  • icon 图标: 用阿里巴巴矢量图标库,地址 http://www.iconfont.cn 怎么下载图标及下载 自行百度,图标放在 src/assets/icons 目录下面,把 iconfont 里创建的项目图标现在 解压后直接放入 这个目录即可,值得注意的是,因为采用了 eslint ,所以 iconfont.js 头部要加 /*eslint-disable */ 忽略错误

Online Demo

(建议使用最新版Chrome浏览器)
在线 Demo

写在最后

一些文章地址:
VUE后台管理的文章

基于Vue.js 2.x系列 + Element UI + RBAC/AUTH权限 的响应式后台管理系统相关推荐

  1. [后台系统模板]优质、整洁的基于Bootstrap 3 Bootstrap 4的响应式后台管理系统模板...

    模板摘要 本文分享的是一套基于Bootstrap 3(同时支持Bootstrap 4)的优质.整洁的响应式后台管理系统模板.它非常干净.整洁,但同时可自定义各种组件等.全响应式布局,你可以轻松地定制. ...

  2. vue+echarts 后台获取数据_vue+element+echarts 响应式后台管理系统,了解一下?

    寒假结束了,趁着寒假,自己玩了一下element和echarts去实现了一个简单的后台管理系统. 项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式 ...

  3. 魔法诗~~~一套基于Vue开发的实用、高端、炫酷的响应式前端网页!!!

    魔法诗网页 源代码获取方式见文章结尾处 1.项目简介 魔法诗是一套基于前端开发框架 Vue3 开发的仅包含前端页面的响应式网站,此网页主要是通过静态的页面展示给用户一些炫酷的界面.无论是用在平时学校的 ...

  4. 干货|6个牛逼的基于Vue.js的后台控制面板,接私活必备

    JavaEE擅长的就是企业级应用,作为一个Java程序员,如果想自己徒手撸一个ERP.WMS之类的系统还是有一点挑战的,不过今天松哥要给大家介绍几款牛逼的基于Vue.js的后台管理控制面板,掌握这几款 ...

  5. vue.js毕业设计,基于vue.js前后端分离教室预约系统(H5移动项目) 开题报告

      毕业论文 基于Vue.js的教室预约系统(H5) 开题报告 学    院: 专    业: 年    级: 学生姓名: 指导教师: 黄菊华   XXXX大学本科生毕业论文(设计)开题报告书 姓   ...

  6. vue.js毕业设计,基于vue.js前后端分离在线教育视频点播系统(H5移动项目) 开题报告

      毕业论文 基于Vue.js视频点播系统(H5) 开题报告 学    院: 专    业: 年    级: 学生姓名: 指导教师: 黄菊华   XXXX大学本科生毕业论文(设计)开题报告书 姓   ...

  7. vue.js毕业设计,基于vue.js前后端分离电影院售票小程序系统 开题报告

      毕业论文 基于Vue.js电影院售票小程序系统 开题报告 学    院: 专    业: 年    级: 学生姓名: 指导教师: 黄菊华   XXXX大学本科生毕业论文(设计)开题报告书 姓   ...

  8. 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册

    基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs ​ 官网下载地址:http ...

  9. iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库

    iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...

  10. iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库

    百度智能云 云生态狂欢季 热门云产品1折起>>>   iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...

最新文章

  1. 快手上市!员工暴富!人均1300万港元!
  2. MYSQL使用的时候遇到的一些问题
  3. php 序列化有上限,总结对比php中的多种序列化
  4. 秒杀系统 mysql_秒杀系统-介绍
  5. 【架构设计】Android:配置式金字塔架构
  6. GnuPG 的PGP使用
  7. 用AtomicStampedReference解决ABA问题
  8. 生产环境-linux-tomcat宕掉-乌龙事件
  9. Magento发布前检查清单
  10. Kubernetes API的流编解码器StreamSerializer
  11. office 论文 页码_「论文页码设置」Word论文页码怎么设置连续?老师傅教你一份设置技巧(很多还不知道) - seo实验室...
  12. Educational Codeforces Round 101 (Rated for Div. 2)
  13. App Store 评分和评论:用户评论如何影响 App Store 排名
  14. c语言考试排座位系统源程序,c语言_排考场座位问题:.doc
  15. R语言lowess函数数据平滑实战(Locally Weighted Regression, Loess)
  16. 「高级java工程师」常见面试题及其答案(持续更新)
  17. c语言define作用范围,#define的作用(C语言)
  18. 冒泡排序原理以及算法
  19. Nginx 理论+实例超详细讲解
  20. 秦始皇焚书坑儒只因曾被算命先生忽悠?

热门文章

  1. vue实用组件——表格
  2. bzoj 2212 Tree Rotations
  3. 【求最大公共子串长度】
  4. Chrome 开发者工具(DevTools)中所有快捷方式列表
  5. 【转】PP模块快速入门之功能简介
  6. jQuery最新1.4 版本的十五个新特性
  7. 基于ASP.NET AJAX的WebPart开发与部署
  8. python_55_局部和全局变量
  9. Invoke-WebRequest Invoke-RestMethod 乱码研究
  10. 循环数组实现队列的四种方式