vue-element-admin
框架简介:vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件如富文本编辑器、Markdown、Json编辑器等,它可以帮助你快速搭建企业级中后台产品原型,对开发可视化后台管理系统节省不少时间。
Github Star 数 59000+ ,Github地址:https://github.com/PanJiaChen/vue-element-admin
先展示下该系统主要功能页面
1.首页展示
![c311dbede2ea192d27c276b083830a29.png](https://i-blog.csdnimg.cn/blog_migrate/e78c6951f2aa0a0d6819481570296af0.jpeg)
2.可视化图表展示
![f837059e91ec43977f9cba881c1cec12.png](https://i-blog.csdnimg.cn/blog_migrate/1670745cd3c383b922ae4eb9fdb4fe21.jpeg)
多功能集成图
![a7184fc8085ad8880a3380a8ffd16a80.png](https://i-blog.csdnimg.cn/blog_migrate/7dfabc1e7d8937d3a5e72c5969c49e74.jpeg)
折线图
3.图标展示
![07d332ac25cdfb4c6bff252b1a903f73.png](https://i-blog.csdnimg.cn/blog_migrate/d27059fce1ec7f6e657ce8e870df1287.jpeg)
自己的图标
![013f3e7d314b8f46025dd8d17584b520.png](https://i-blog.csdnimg.cn/blog_migrate/169eeb5b164bab7da30a34fb9c868973.jpeg)
集成element-ui的图标
4.内含多种组件展示
![4ffc5cc486e550ba0198a380b418f378.png](https://i-blog.csdnimg.cn/blog_migrate/d6a0ad88241a78c764ab34fa62fbc525.jpeg)
富文本编辑器
![18d39b5e898b3e62576d7f9dbaa3dab9.png](https://i-blog.csdnimg.cn/blog_migrate/fa98c93354b73aa1038ec3eac38469b5.jpeg)
Markdown
![d342dd610cfdc66d64293941538bfea0.png](https://i-blog.csdnimg.cn/blog_migrate/73499ddda64e594ba2fa5df142e1e534.jpeg)
Json视图编辑器
![d84dc1831a1341e38a8ed36022b43e03.png](https://i-blog.csdnimg.cn/blog_migrate/da48f782ae2a18c75936f89f8248f3d1.jpeg)
可拖拽的表单
5.Form表单综合展示
![012b115332762338ff932ec3267277c7.png](https://i-blog.csdnimg.cn/blog_migrate/e1af521a696fa9ed8c6151eb91683cdf.jpeg)
6.导入,导出excel
![a8e1434a1d59016514fc1e928668f805.png](https://i-blog.csdnimg.cn/blog_migrate/d258ca2bf8f9301702df9b1c9c89c17d.jpeg)
7.导出zip压缩包
![3a22137ed40eac1270feeb888774d508.png](https://i-blog.csdnimg.cn/blog_migrate/05f5036c2d0a0f64f2738ce385d1db04.jpeg)
8.下载pdf
![a0067d7ff4fa0f8c08451c6ec6925851.png](https://i-blog.csdnimg.cn/blog_migrate/ef1a5169ed1f9408f0707aa6a26d31c7.jpeg)
9.支持自定义换肤
![6e9c7f3c8953e94ad73f3284f2dbfef1.png](https://i-blog.csdnimg.cn/blog_migrate/20880a3aa6fae914b2c4a3ba78b4b1ee.jpeg)
换肤前
![87fde6fb7958d7920d3353230076f496.png](https://i-blog.csdnimg.cn/blog_migrate/0a117816a6d8f9013882edabca76fb47.jpeg)
换肤后
10支持国际化
![a831d9ff9fd643d527f385643e00a108.png](https://i-blog.csdnimg.cn/blog_migrate/164bffc0164f36f232c55b51e3a21dbe.jpeg)
英文
![156dec3a10d65bdbf34020563715d12d.png](https://i-blog.csdnimg.cn/blog_migrate/1750a24a2372e271c0cb06f45cf8e122.jpeg)
日语
演示地址:https://panjiachen.gitee.io/vue-element-admin
安装
# clone the projectgit clone https://github.com/PanJiaChen/vue-element-admin.git # enter the project directorycd vue-element-admin # install dependencynpm install # developnpm run dev
建议:不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行,可使用 yarn 替代 npm。
Windows 用户若安装不成功,很大概率是node-sass安装失败,解决方案。
另外因为 node-sass 是依赖 python环境的,如果你之前没有安装和配置过的话,需要自行查看一下相关安装教程。
喜欢的老铁,加个关注!