vue2.0 + element ui 后台管理系统

vue2.0 和 elementui  搭建的一个后台管理系统

概述:

  这是一个用vuejs2.0element搭建的后台管理界面。

技术栈:

  vue2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。

  element ui:基于vue2.0的ui组件库。

  vue-router:一般单页面应用spa都要用到的前端路由。

  vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

  webpack + es6/7 + less

  mock.js : 相对于其他同类的框架的实现,mock.js超出了我的意料。

  • 基于 数据模板 生成模拟数据。
  • 基于 HTML模板 生成模拟数据。
  • 拦截并模拟 ajax 请求。
  • 无需等待,让前端独立于后端进行开发,

项目截图

登录页面

table页面

图表页面

项目运行

git clone https://github.com/yjx-passion/vue2.0-module

cd vue2-module

npm install

npm run dev

访问端口 http://localhost:8080

源码地址  https://github.com/yjx-passion/vue2.0-module

说明

如果对您对此项目有兴趣,可以点 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

时间: 2024-10-23 01:13:01

vue2.0 + element ui 后台管理系统的相关文章

JuCheap V2.0响应式后台管理系统模板正式发布beta版本

JuCheap V1.* 查看地址: http://blog.csdn.net/allenwdj/article/details/49155339 经过半年的努力,JuCheap后台通用响应式管理后台模板框架,终于有V1.*正式升级到了JuCheap V2.0 beta版本. 首先介绍下JuCheap V2.0的基础技术: 1.相对于V1.*版本的框架,更加的简洁 2.T4模板,一键生成多种类型的文件 3.DI容器,由MEF改成了AutoFac,可选属性注入和构造函数注入两种方式. 4.真正的响

Vue + Element 搭建后台管理系统(一)

技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 项目所使用的js框架 vue-router, vue.js配套路由 vuex,状态管理 Element,UI框架 开发环境 Node JS(npm) Visual Studio Code(前端IDE) 安装Visual Studio Code 下载地址: 官网下载地址 Visual Studio Code 是一款非常优秀的开源编辑器,非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装. 更多 VS Code 教程可

Vue + Element 搭建后台管理系统(九)

接口请求格式定义 前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟. 接口定义遵循几个规范: 1. 接口按功能模块划分. 系统登录:登录相关接口 用户管理:用户管理相关接口 机构管理:机构管理相关接口 角色管理 : 角色管理相关接口 菜单管理 : 菜单管理相关接口 字典管理 : 字典管理相关接口 日志管理 : 日志管理相关接口 2. 通用增删改查接口采用统一命名规范. save : 保存操作 update: 更新操作 delete: 删除操作 find

vue2.5 + element UI el-table 导出Excel

安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue from 'vue' import FileSaver from "file-saver"; import XLSX from "xlsx"; export default { /** * @param tableId 要导出的表格ID * @param fileNa

[转载]Vue 2.x 实战之后台管理系统开发(一)

2. 开发前须知 我的后台管理系统项目运用了如下框架/插件: Vue 2.x -- 项目所使用的 js 框架,我所使用的版本是:2.1.10 vue-router 2 -- Vue 2.x 配套路由,我所使用的版本是:2.3.0 Element -- UI 框架,饿了么出品,我所使用的版本是:1.2.8 Echarts -- 图表插件,百度出品,我所使用的版本是:3.4.0 在 UI 框架的选择上,除了 Element,iView 也不错,大家可以按需选择. 对于所使用的框架/插件,尽可能先快速

Vue2.0新手入坑环境搭建(一)

每周不定期更新  专业团队接APP 外包 联系QQ1129580542 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.

Vue2 后台管理系统解决方案

Vue2 后台管理系统解决方案 linshuai 1 天前 基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案. github地址:lin-xin/manage-system demo地址:manage-system 前言 之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足.像图片裁剪上传.富文本编辑器.图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成.从寻找组件,到使用组件

后台管理系统效果图UI界面html源码后台源代码

后台管理系统效果图UI界面html源码后台源代码 亲注意,我们销售的网站模板或者网站代码.系统源代码,是网站开发者(程序员)才可能用到的模板或者代码. 网站模拟适用于做好网站前台又不太想在后台界面花太多时间构想.对传统管理界面审美疲劳的中小企业或个人建站者,因需自行套上ASP/ASP.NET/PHP等程序后使用,所以我们不建议没有专业知识基础的亲购买,不懂专业知识和不懂此为何物的请慎怕! 程序源代码,适用于开发者对于个别功能没有开发经验或者无从下手,可以参照或者直接使用的. ----------

Vue2 + Koa2 实现后台管理系统

看了些 koa2 与 Vue2 的资料,模仿着做了一个基本的后台管理系统,包括增.删.改.查与图片上传. 工程目录: 由于用到了 async await 语法,node的版本需要至少7.0,我目前用的是 7.9.0 1. 根据 package.json 安装好依赖: { "name": "vue2.x-koa2.x", "version": "1.0.0", "description": "A V