专栏首页Albert陈凯2018-08-16 好漂亮的后台模板附教程vue-element-adminvue-element-admin

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 条评论
登录 后参与评论

相关文章

  • OLAP(On-Line Analysis Processing)在线分析处理引擎

    OLAP(On-Line Analysis Processing)在线分析处理是一种共享多维信息的快速分析技术;OLAP利用多维数据库技术使用户从不同角度观察数...

    Albert陈凯
  • 借助 Redis ,让 Spark 提速 45 倍!

    一些内存数据结构比其他数据结构来得更高效;如果充分利用Redis,Spark运行起来速度更快。 Apache Spark已逐渐俨然成为下一代大数据处理工具的典...

    Albert陈凯
  • 4.4 共享变量

    4.4 共享变量 一般来说,当一个被传递给Spark操作(例如,Map和Reduce)的函数在一个远程集群上运行时,该函数实际上操作的是它用到的所有变量的独立...

    Albert陈凯
  • 用 npm scripts 来构建前端项目的尝试

    最近读了 Why I Left Gulp and Grunt for npm Scripts。读完后,觉的这文章写的相当不错,就决定尝试下。

    Joel
  • 恶意加密货币应用泛滥成灾 黑客用它们窃取金钱和个人数据

    腾讯科技讯 据外媒报道,最新研究显示,黑客们现在盯上了在苹果App Store、谷歌Google Play以及其他应用商店上泛滥成灾的恶意加密货币应用,并且利用...

    企鹅号小编
  • Oracle Database 12.2新特性详解

    在2015年旧金山的Oracle OpenWorld大会上,Oracle发布了Database 12.2的Beta版本,虽然Beta版本只对部分用户开放,但是大...

    数据和云
  • Oracle Database 12.2新特性详解

    在2015年旧金山的Oracle OpenWorld大会上,Oracle发布了Database 12.2的Beta版本,虽然Beta版本只对部分用户开放,但是大...

    数据和云
  • Oracle Database 12.2新特性详解

    在2015年旧金山的Oracle OpenWorld大会上,Oracle发布了Database 12.2的Beta版本,虽然Beta版本只对部分用户开放,但是大...

    数据和云
  • LeetCode 518. 零钱兑换 II(动态规划)

    给定不同面额的硬币和一个总金额。 写出函数来计算可以凑成总金额的硬币组合数。 假设每一种面额的硬币有无限个。

    Michael阿明
  • mysql 查看与修改字符集?

    咻一咻

扫码关注云+社区

领取腾讯云代金券