访问排行榜
谷歌广告
谷歌广告
2018-08-16 好漂亮的后台模板附教程vue-element-admin
Author Albert陈凯 | Posted 2018-08-15 16:00:00

转载地址:www.jianshu.com/p/0c483f0220ee

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


">https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">

功能

- 登录 / 注销</p>

<ul>
<li><p>权限验证</p>

<ul>
<li>页面权限</li>
<li>指令权限</li>
<li>二步登录</li>
</ul></li>

<li><p>多环境发布</p>

<ul>
<li>dev sit stage prod</li>
</ul></li>

<li><p>全局功能</p>

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

<li><p>编辑器</p>

<ul>
<li>富文本</li>
<li>Markdown</li>
<li>JSON 等多格式</li>
</ul></li>

<li><p>Excel</p>

<ul>
<li>导出excel</li>
<li>导出zip</li>
<li>导入excel</li>
<li>前端可视化excel</li>
</ul></li>

<li><p>表格</p>

<ul>
<li>动态表格</li>
<li>拖拽表格</li>
<li>树形表格</li>
<li>内联编辑</li>
</ul></li>

<li><p>错误页面</p>

<ul>
<li>401</li>
<li>404</li>
</ul></li>

<li><p>組件</p>

<ul>
<li>头像上传</li>
<li>返回顶部</li>
<li>拖拽Dialog</li>
<li>拖拽看板</li>
<li>列表拖拽</li>
<li>SplitPane</li>
<li>Dropzone</li>
<li>Sticky</li>
<li>CountTo</li>
</ul></li>

<li><p>综合实例</p></li>

<li><p>错误日志</p></li>

<li><p>Dashboard</p></li>

<li><p>引导页</p></li>

<li><p>Echarts 图表</p></li>

<li><p>Clipboard(剪贴复制)</p></li>

<li><p>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 © 2017-present PanJiaChen

Android+GoLang+SprintBoot探讨群:186305789(疯狂的程序员),绝影大神在等你

个人兴趣网站:zero接码平台

个人兴趣网站:猿指


Comments

comments powered by zero