vue-element-admin

基于 vue+element 的后台集成方案 vue-element-admin

MIT
JavaScript
跨平台
2017-08-23
王练

vue-element-admin

本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用 vueAdmin-template , 桌面端 electron-vue-admin

注意:该项目目前使用 element-ui@1.4.1 版本,所以最低兼容 vue 2.3.0。

前言

这半年来一直在用vue写管理后台,目前后台已经有百来个页面,十几种权限,但维护成本依然很低,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios由webpack2打包。由于是个人项目,所以数据请求都是用了mockjs模拟。注意:在此项目基础上改造开发时请移除mock文件。

该项目并不是一个脚手架,更倾向于是一个集成解决方案

该项目不支持低版本游览器,有需求请自行添加polyfill 详情

功能

  • 登录/注销

  • 权限验证

  • 侧边栏

  • 面包屑

  • 富文本编辑器

  • Markdown编辑器

  • JSON编辑器

  • 列表拖拽

  • plitPane

  • Dropzone

  • Sticky

  • CountTo

  • echarts图表

  • 401,404错误页面

  • 错误日志

  • 导出excel

  • table example

  • 动态table example

  • 拖拽table example

  • 内联编辑table example

  • form example

  • 多环境发布

  • dashboard

  • 二次登录

  • 动态侧边栏(支持多级路由)

  • mock数据

  • cache tabs example

  • screenfull

  • markdown2html

  • views-tab

开发

    # 克隆项目
    git clone https://gitee.com/panjiachen/vue-element-admin.git

    # 安装依赖
    npm install
    //or # 建议不要用cnpm  安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
    npm install --registry=https://registry.npm.taobao.org

    # 本地开发 开启服务
    npm run dev

浏览器访问 http://localhost:9527

发布

    # 发布测试环境 带webpack ananalyzer
    npm run build:sit-preview

    # 构建生成环境
    npm run build:prod

状态管理

后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。

效果图

两步验证登录 支持微信和qq

真正的动态换肤

的码云指数为
超过 的项目
加载中
此软件有 34 条评论,请先登录后再查看。

vue-element-admin 4.4.0 发布,后台集成方案

vue-element-admin 4.4.0 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典...

06/22 07:46

vue-element-admin 4.3.1 发布,后台集成方案

vue-element-admin 4.3.1 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典...

06/19 07:33

vue-element-admin 4.3.0 和 4.2.2 发布,后台集成方案

vue-element-admin 4.3.0 和 4.2.2 发布了。vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证...

06/10 07:12

vue-element-admin 4.2.1 发布,后台集成方案

vue-element-admin 4.2.1 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典...

2019/05/28 07:01

vue-element-admin 4.2.0 发布,后台集成方案

vue-element-admin 4.2.0 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典...

2019/05/22 07:18

vue-element-admin 4.1.0 发布,全面优化代码注释

vue-element-admin 4.1.0 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典...

2019/05/06 06:57

vue-element-admin 4.0.1 发布,后台集成方案

vue-element-admin 4.0.1 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典...

2019/04/12 07:14

vue-element-admin 4.0.0 正式版发布

v4.0版本正式发布。 重大改变 基于 vue-cli@3进行构建 调整了项目的目录结构 mock 文件移至根目录下 layout 从 views 文件夹下移至 src 下 使用了最新的 eslint-plugin-vue@5,重新格式化了代...

2019/04/03 00:05

vue-element-admin 4.0.0 beta 发布,后台集成方案

vue-element-admin 4.0.0 beta 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提...

2019/03/27 07:04

vue-element-admin 3.10.0 发布,后台集成解决方案

vue-element-admin 3.10.0 发布了,vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了...

2019/01/02 07:14

没有更多内容

加载失败,请刷新页面

1
回答
前端问题

请问这种在页面用什么展示,<el-form>可以吗?本人前端小白,求指教啊

07/31 15:26
3
回答
VUE异步初始化数据
嘉飞 的回答 2019/06/14 18:21
最佳答案
在html模板上加个判断嘛,字段为null 就不渲染

没有更多内容

加载失败,请刷新页面

没有更多内容

vue-element-admin

[toc] <p align="center"> <img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg"> </p> <p align="center"> <a href="https://github.com/vuejs/vu...

2019/04/24 14:44
155
0
vue.js 的 vue-element-admin 实践开发

官方网址: https://panjiachen.github.io/vue-element-admin-site/zh/ 一:面包屑导航,根目录文字修改: 定位到文件 vue-element-supply-chain\src\components\Breadcrumb\index.vue,40行...

2019/11/08 15:42
134
0
vue-element-admin安装

URL: https://panjiachen.github.io/vue-element-admin-site/zh/ 测试了下面两个方案: 集成方案: vue-element-admin 基础模板: vue-admin-template 建议 你可以把 vue-element-admin当做工...

01/02 22:28
379
0
vue-element-admin 使用总结

官网https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD vue项目做的少,elementUI也是最近才接触,所以文档看了一周才有了点思路,最难的就是用户登录权限...

2019/03/28 18:19
249
0
vue-element-admin 学习笔记

20190929 vue相关 vue-ref ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。 html5-autocomplete autocomplete 属性规定输入字段是否应该启用自动完成...

2019/09/29 11:46
66
0
vue-element-admin框架快速入门

年底了,最近公司也不是太忙,感觉今年互联网行业都遇到寒冬,不在是前两年像热的发烫的赛道。这几天完成公司项目系统的优化和升级,目前准备想开发一套前后端分离的系统。 现在java最新最火...

01/07 09:59
314
0
vue-element-admin后台的安装

# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可...

2019/10/18 14:34
78
0
vue-element-admin实现模板打印

一、简介 模板打印也叫”套打“,是业务系统和后台管理系统中的常用功能,B/S系统中实现”套打“比较繁琐,所以很多的B/S系统中的打印功能一直使用的是浏览器打印,很少实现模板打印。本篇将...

2019/11/19 10:18
337
0
vue-element-admin完整项目实例

项目运行地址:https://panjiachen.github.io/vue-element-admin/#/login 项目地址:https://github.com/PanJiaChen/vue-element-admin 项目地址:(国际化)https://github.com/PanJiaChen...

02/08 19:48
580
0
vue-element-admin 框架使用总结

安装启动 安装cnpm来解决依赖安装失败问题,安装完之后,可以使用cnpm install安装已有或新增加的依赖,一是可以成功安装外网上的依赖(仓库在国内),二是速度更快 cnpm安装如下: npm inst...

04/15 14:14
118
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部