# vue2-elementui-admin-layout **Repository Path**: nut77/vue2-elementui-admin-layout ## Basic Information - **Project Name**: vue2-elementui-admin-layout - **Description**: 利用vue2全家桶和elementui等实现PC端后台管理系统前端架构 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 53 - **Forks**: 12 - **Created**: 2020-09-08 - **Last Updated**: 2025-05-16 ## Categories & Tags **Categories**: backend **Tags**: vue2, ElementUI, Less, Vuex ## README # vue2-elementui-layout > 本项目旨在快速开发后台管理系统,提供此类项目前端架构和部分常用功能组件的使用示例。 > 项目主要基于:vue2、elementui、axios、less、vuex、vue-router开发 ## 1、项目主要功能 - 简洁的界面主题; - eslint配置; - 常用工具方法提供; - 异步请求相关方法整合,接口文件整合; - 路由的快速配置(含权限配置); - 根据路由配置,系统导航的配置(默认顶部+左侧导航,可选顶部导航或左侧导航); - 常用公共组件的提供:BaseDialog、BaseTable、BaseText、BaseDatePicker; - 组件常用方法和数据提供:mixins(表格、弹框、用户信息、echarts基本方法等); - 表单自定义验证规则; - 系统名、版本号、代理的统一配置; - ... ## 2、项目目录结构说明 - dist 存放打包后的文件 - public - template 项目中使用的静态模板文件 - src - api 接口相关文件 - 按功能模块命名的.js - assets - images - common - login - layout - ... - javascript 存放各模块单独引用的js,与mixins有差别 - styles - theme 主题样式(element-ui官网生成) - 样式文件.less - components 系统公共组件 - directives 全局注册的指令 - filters 全局注册的过滤器 - layouts 界面布局(导航)相关组件 - main 入口 - mixins 按组件功能来分的混入,按需引用 - pages 页面组件 - 按功能模块来命名 - components 这个模块公共组件 - router - config.js 导航配置 - index.js - routes.js 生成路由配置 - store - index.js - modules - utils 公用方法,全局引入 - dict.js 字典,无必要的话可加入到混入里 - request.js 异步请求公共方法 - tool.js 公共方法 - validator.js 表单自定义验证规则 - .env 环境变量配置,一般情况下只需要这个文件就可以了 - .env.development 开发环境环境变量配置 - .env.production 生产环境环境变量配置 - .eslintrc.js eslint配置 - vue.config.js - webstorm.config.js 处理webstorm配置路径别名后,ctrl+左键失效 ## 3、系统主要功能 几张系统功能截图,更多的功能还需要自己上手熟悉。 ### 3.1 导航 #### 3.1.1 顶部+左侧导航 ![顶部+左侧导航](./screenshots/01.png) #### 3.1.2 顶部导航 ![顶部导航](./screenshots/02.png) #### 3.1.3 左侧导航 ![左侧导航](./screenshots/03.png) ### 3.2 登录 ![登录](./screenshots/04.png) ### 3.3 表格 #### 3.1 含有表格的页面 ![含有表格的页面](./screenshots/05.png) #### 3.2 表格展开行效果 ![表格展开行效果](./screenshots/06.png) #### 3.3 表格下载 ![表格下载](./screenshots/08.png) ### 3.4 弹框 ![弹框](./screenshots/07.png) ### 3.5 日期时间选择器 ![弹框](./screenshots/09.png) ### 3.6 简单文字显示 ![弹框](./screenshots/10.png) ## 4、写在最后 如果启动不了或者某些地方报错请自己试着找问题,慢慢的就容易了。 大家在使用过程中,如果发现有需要改进和优化的地方,请在下方留言呀。