2018-08-16 好漂亮的后台模板附教程vue-element-adminvue-element-admin

vue-element-admin

简介

vue-element-admin 是一个后台集成解决方案,它基于 vueelement。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

本项目的定位是后台集成方案,不适合当基础模板来开发。

群主 圈子 楼主会经常分享一些技术相关的东西,或者加入qq 群

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

v3.8.0开始使用webpack4。所以若还想使用webpack3开发,请使用该分支webpack3

该项目不支持低版本浏览器(如 ie),有需求请自行添加 polyfill 详情

前序准备

你需要在本地安装 nodegit。本项目技术栈基于 ES2015+vuevuexvue-routeraxioselement-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。

同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目

如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr

<p align="center"> <img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png"> </p>

功能

- 登录 / 注销

- 权限验证
  - 页面权限
  - 指令权限
  - 二步登录

- 多环境发布
  - dev sit stage prod

- 全局功能
  - 国际化多语言
  - 多种动态换肤
  - 动态侧边栏(支持多级路由嵌套)
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - 本地mock数据
  - Screenfull全屏
  - 自适应收缩侧边栏

- 编辑器
  - 富文本
  - Markdown
  - JSON 等多格式

- Excel
  - 导出excel
  - 导出zip
  - 导入excel
  - 前端可视化excel

- 表格
  - 动态表格
  - 拖拽表格
  - 树形表格
  - 内联编辑

- 错误页面
  - 401
  - 404

- 組件
  - 头像上传
  - 返回顶部
  - 拖拽Dialog
  - 拖拽看板
  - 列表拖拽
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- 综合实例
- 错误日志
- Dashboard
- 引导页
- Echarts 图表
- Clipboard(剪贴复制)
- Markdown2html

开发

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

# 安装依赖
npm install

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

# 启动服务
npm run dev

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

发布

# 构建测试环境
npm run build:sit

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

其它

# --report to build with bundle size analytics
npm run build:prod

# --generate a bundle size analytics. default: bundle-report.html
npm run build:prod --generate_report

# --preview to start a server in local to preview
npm run build:prod --preview

# lint code
npm run lint

# auto fix
npm run lint -- --fix

更多信息请参考 使用文档

Changelog

Detailed changes for each release are documented in the release notes.

Online Demo

在线 Demo

License

MIT

Copyright (c) 2017-present PanJiaChen

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序猿DD

自建API网关「架构设计篇」

阅读对象 传统企业正在做微服务架构转型的开发人员或者架构师,希望本文对您能起到一定的引导作用。 API网关介绍 网关一词较早出现在网络设备里面,比如两个相互独立...

1.5K7
来自专栏程序你好

一个微服务架构的简单示例

4433
来自专栏张善友的专栏

MongoDB核心贡献者:不是MongoDB不行,而是你不懂!

近期MongoDB在Hack News上是频繁中枪。许多人更是声称恨上了MongoDB,David mytton就在他的博客中揭露了MongoDB许多现存问题。...

24610
来自专栏即时通讯技术

移动端IM开发需要面对的技术问题

P2P多见于局域网内聊天工具,典型的应用有:飞鸽传书、天网Maze(你懂的)等。这类软件在启动后一般做两件事情:

1511
来自专栏企鹅号快讯

专为渗透测试人员设计的 Python 工具大合集

如果你对漏洞挖掘、逆向工程分析或渗透测试感兴趣的话,我第一个要推荐给你的就是Python编程语言。Python不仅语法简单上手容易,而且它还有大量功能强大的库和...

2538
来自专栏CSDN技术头条

分布式锁的技术选型及思考

在计算机中,锁的作用是解决在并发状态下的共享资源互斥问题,保证在同一时间只有一个进程/线程可以掌握资源的控制权。

1433
来自专栏FreeBuf

Android 5.x漏洞:黑客可以绕过屏幕密码进入系统

很多Android用户会选择使用锁屏密码保护设备,但最新爆出的漏洞却令人震惊:任何人无需复杂的操作即可绕过锁屏直接进入你的系统! 攻击者可以通过漏洞导获取上锁...

24110
来自专栏Android 开发者

Android 9 Pie 兼容性常见问题及注意事项

使用了系统的 ClassLoader 加载 org.apache.http.* 的库

2972
来自专栏web前端教室

【亲测】前端如何写满你的硬盘?

今天偶然在网上看到一篇文章,说是前端如何机智的搞坏电脑。大意就是通过node搞一个服务,然后以get请求的方式通过localStorage,大量的向用户浏览器缓...

1444
来自专栏CDN及云技术分享

原来你是这样的http2

目前HTTP/2.0(简称h2)已经在广泛使用(截止2018年8月根据Alexa流行度排名的头部1千万网站中,h2占比约29%,https://w3techs....

72413

扫码关注云+社区

领取腾讯云代金券