基于 vue+element 的后台集成方案 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://github.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


真正的动态换肤

加载中

评论(19)

总有刁民想坑孤
编译时间太长,项目文件300个生产模式编译一次30分钟
爱上你复健科放
厉害厉害,mark
海淀游民
海淀游民
请问这个框架应该如何学习入门呢?API 文档什么的应该参考什么好?
gavinlibo
gavinlibo
npm WARN deprecated nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
产品攻城师
产品攻城师
mark
z
zhangsetter
收藏
灵魂架构师
灵魂架构师
接口是不是标准的RESTFull?
同一种调调
同一种调调
收藏了 https://github.com/jaywcjlove/awesome-uikit
独来H独往
不错 收藏了

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

vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组...

10/23 06:50

vue-element-admin v3.9.1 发布,后台集成方案

vue-element-admin v3.9.1 已发布,更新内容: feature[TagsView]: 支持鼠标中键关闭 TagsView #1149 feature[Breadcrumb]: 增加 pathToRegexp 来处理 path,以便让面包屑支持动态路径 #114...

10/10 07:51

vue-element-admin v3.9.0 发布,后台集成方案

vue-element-admin v3.9.0 已发布,更新内容: feature[Tinymce]: 支持 i18n #994 (by @mimimile) feature[tagsView]: 支持刷新 #1033 feature:[sidebar]: 支持 external-link 外链 #991 fea...

09/18 11:04

vue-element-admin v3.8.0 发布,后台集成方案

vue-element-admin v3.8.0 已发布,从该版本起开始使用 webpack4 和 vue-loader@15 ,依赖的第三方库也已升级至最新版本。 如果想继续使用 webpack3 ,请使用 webpack3 分支。 vue-element-...

08/16 07:51

vue-element-admin v3.7.2 发布,后台集成方案

vue-element-admin v3.7.2 已发布,更新内容如下: 新增了 lint-staged 进行提交格式化校验 #818 优化了[ArticleDetail]: refine el-col :span #841 by @ZYSzys 优化了[login]: 修复了登录页...

07/15 07:47

vue-element-admin v3.6.4 发布,后台集成方案

vue-element-admin v3.6.4 已发布,更新如下: 优化: index.html script 标签插入位置 #507 优化: 使用 2 空格替代一个 tab #522 优化: 使用 Object.keys 来遍历 #518 优化[editor-dashboard...

03/27 07:49

vue-element-admin v3.6.3 发布,后台集成方案

vue-element-admin v3.6.3 已发布,更新内容: 优化 [Tinymce]:使其支持在 dialog 中上传图片 && 增加 SetContent listener 31b7fa6 7cacd5a 优化 [i18n]:TagsView 右键 contextmenu 支持国...

03/14 16:46

vue-element-admin v3.6.1 发布,后台集成方案

vue-element-admin v3.6.1 已发布,更新内容: 新增 TreeTable 在开发模式中设置 cheap-source-map 为默认打包方式 vue-element-admin 是基于 vue+element 的后台集成方案,功能包括: 登录/...

01/24 07:37

vue-element-admin v3.5.1 发布,后台集成方案

vue-element-admin v3.5.1 已发布,更新内容: 新增 postcss-url 插件 优化upload-excel] 支持拖拽上传excel 优化[permission]:set role => roles 修复侧边栏多级菜单样式问题 #327 修复国际...

01/06 07:57

vue-element-admin v3.1.1 发布,后台集成方案

vue-element-admin v3.1.1 已发布,更新内容: 将国际化 generateTitle 方法提取到 utils 中 acebaea 修复侧边栏在默些特殊情况下的 bug d09923f vue-element-admin 是基于 vue+element 的后...

2017/12/07 07:36

没有更多内容

加载失败,请刷新页面

暂无问答

vue 资源

示例 vue开源项目库汇总 mobile ionic vue 的实现 ant design ant-design 官网 vue antd vue antd admin element dynamicform nuxt doodoo 商城 bootstrap coreui vue shards 组件开发 开发组...

09/03 08:36
69
0
设计

不会设计没关系!看看这七个实用的网页UI设计小技巧! element-ui awesome-element find 覆盖element ui样式 element-ui 官方文档页面 换肤方式 ant design ant-design-vue vue-antd-admin v...

08/20 17:39
55
0
一个简单的脚手架drop-cli、vue的组件库、移动端架构和pc管理后台模版

鉴于自己的经验和以往做过的项目,为了提高工作效率,特意整理了一下项目模版、vue组件库等模版并添加到一个自己封装的脚手架drop-cli中。不喜勿喷! drop-cli 一个简单的脚手架,可添加不同的...

09/13 13:49
30
0
Vue Theme主题样式整理

一、官方主题在线生成预览 https://elementui.github.io/theme-chalk-preview/#/zh-CN 二、第三方开发者主题 源代码: https://github.com/taylorchen709/vue-admin 在线预览: https://tayl...

10/19 10:45
14
0
el-table 的key属性

element ,el-table,vue,key

06/05 11:18
250
0
Vue国际化处理 vue-i18n 以及项目自动切换中英文

### 0. 直接上 预览链接 [Vue国际化处理 vue-i18n 以及项目自动切换中英文](https://mgbq.github.io/vue-permission/#/login) ### 1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化...

05/03 12:52
59
0
moell/mojito - 基于Laravel、Vue、ELement 构建的基础后台系统扩展

Mojito Mojito 是一个基于 Laravel, Vue, Element构建的后台管理系统。 截图 获取地址 https://github.com/moell-peng/mojito 欢迎使用和star 特征 可快速衍生多个后台系统 内置角色,权限,...

10/09 12:46
10
0
2018年最值得关注的30个Vue开源项目

译者按: 学习优秀的开源项目是提高代码水平最有效的方式。 原文: 30 Amazing Vue.js Open Source Projects for the Past Year (v.2018) 译者: Fundebug 为了保证可读性,本文采用意译而非直...

05/30 15:32
1K
0
2018年最值得关注的30个Vue开源项目

原文链接:blog.fundebug.com 899元带你拿下腾讯官方微信小程序开发 NEXT 学位!成为小程序开发领域的领先开发者!立即报名了解详情:ke.qq.com 译者按: 学习优秀的开源项目是提高代码水平最...

05/30 14:13
19
0
vue笔记

添加devtools https://github.com/vuejs/vue-devtools#vue-devtools vue的computed属性 有缓存,methods属性没有缓存 vue实例中的data是属性 可以定义对象,Vue.component中的data是方法 需要...

2017/08/28 04:10
117
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部