# vue-element-admin-zero **Repository Path**: zero_fsc/zero-blog ## Basic Information - **Project Name**: vue-element-admin-zero - **Description**: vue+element后台管理系统 (当前为毕业设计面向学院财务处的财务预算及权限管理系统) - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 7 - **Forks**: 0 - **Created**: 2020-03-02 - **Last Updated**: 2023-06-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## budget-front-end ## 项目描述 ``` 此项目当前主要用针对个人毕业设计所设计的前端Vue后台管理系统， 可用于完成中小型系统的后台开发 目前正应用此框架对学院 选修课管理系统 财务预算管理系统 进行二次重构型开发 当前已完成针对选修课管理系统以及财务预算管理系统重构，并正在整理、整合、优化、修复当前后台框架系统 项目目前正在开发ing ``` ## ## 当前开发已完成 - [x] 文件目录构建 - [x] page组件 - [x] chart组件 - [x] drop组件 - [x] menu组件 - [x] form组件封装 - [x] tree组件封装 - [x] layout模块 - [x] 路由解耦 - [x] 路由 - [x] 用户信息模块 - [x] 登录退出认证 - [x] 有无token - [ ] 富文本(30%) - [x] 1440-1920响应式 - [x] 1366-1440响应式 - [ ] mock数据 结合express生成接口 - [x] axios二次封装 - [x] utils文件目录及子文件构建 基于vuecli3.0 + element-ui打造得适用于个人日常开发的后台管理项目 ## 项目结构 ``` |—— vue-element-admin-zero |—— docs 组件说明文档(持续更新中) | |—— YlButton.md button说明文档 | |—— YlUpload.md upload说明文档 |—— public vue-cli 静态页面模板目录 |—— src |—— App.vue |—— main.js |—— api api接口目录 | |—— index.js 导出 api 模块 | |—— src | |—— public.js 公共api模块 | |—— ... |—— assets 静态资源目录 | |—— icons 图标目录 | | |—— index.js 导出 icon 模块 | | |—— icon icon目录 | | |—— svg svg目录 | |—— images 图片目录 |—— components/ 组件详细介绍下方所示 |—— environment 环境前置请求路由(主要用于通用前置http) | |—— global.js 全局前置http模块(当前主要用于ftp服务) |—— error 常见错误页面目录 | |—— 404 404 | | |—— index.js 导出404模块 | | |—— src | | |—— index.vue | |—— ... |—— mock mock数据目录 | |—— ... |—— public 公共界面目录 | |—— Layout 布局界面模块 | | |—— index.js 导出 layout 模块 | | |—— src | | |—— index.vue | |—— Login 登陆界面模块 | |—— index.js 导出 login 模块 | |—— src | |—— index.vue |—— route 路由目录 | |—— index.js 导出 route 实例(方便管理) | |—— modules modules目录 | |—— public.js 公共路由(login)及路由钩子配置 | |—— ... |—— store vuex目录 | |—— index.js 导出 vuex 实例(方便管理) | |—— modules modules目录 | |—— users.js 用户模块 |—— style 样式目录 | |—— index.js 导出 style 实例(方便管理) | |—— src 样式表 | |—— common.scss 自定义样式 | |—— element.scss 针对element的样式 | |—— global.scss 用于响应式样式 | |—— public.scss 公共样式 | |—— text.scss 字体样式 |—— utils 工具目录 | |—— index.js 常规工具函数 | |—— _proto.js 注入Vue原型上的工具函数 | |—— auth.js 操纵用户信息 | |—— formRule.js form表单自定义验证规则 | |—— http.js axios封装 | |—— modal.js 弹出框 | |—— storage.js 缓存 | |—— verifiable.js 正则验证 |—— views/ 页面目录 | |—— .editorconfig | |—— .gitignore | |—— nginx.conf nginx环境配置 | |—— babel.config.js | |—— package-lock.json | |—— package.json | |—— README.md | |—— vue.config.js vue webpack 配置文件 ``` ## 组件目录 ``` |-- components | |-- index.js | |-- YlButton | | |-- index.js | | |-- src | | |-- button-item.vue | | |-- index.vue | |-- YlChart | | |-- areaAntChart | | | |-- index.js | | | |-- src | | | |-- index.vue | | |-- columnAntChart | | | |-- index.js | | | |-- src | | | |-- index.vue | | |-- lineAntChart | | | |-- index.js | | | |-- src | | | |-- index.vue | | |-- pieAntChart | | |-- index.js | | |-- src | | |-- index.vue | |-- YlDepart | | |-- index.js | | |-- src | | |-- index.vue | |-- YlDialog | | |-- index.js | | |-- src | | |-- index.vue | |-- YlDrop | | |-- index.js | | |-- src | | |-- index.vue | |-- YlEditor | | |-- index.js | | |-- src | | |-- index.vue | |-- YlForm | | |-- form.vue | | |-- formItem.vue | | |-- index.js | | |-- src | | |-- upload.vue | |-- YlGroup | | |-- baidu | | | |-- index.js | | | |-- src | | | |-- index.vue | | |-- gaode | | |-- index.js | | |-- src | | |-- index.vue | |-- YlLayout | | |-- Header | | | |-- index.js | | | |-- src | | | |-- index.vue | | |-- Menu | | | |-- index.js | | | |-- menu.md | | | |-- src | | | |-- index.vue | | | |-- menuItem.vue | | |-- YlBread | | |-- index.js | | |-- src | | |-- index.vue | |-- YlPage | | |-- index.js | | |-- src | | |-- index.vue | |-- YlTable | |-- index.js | |-- src | |-- index.vue | |-- template.vue ``` ## 页面目录(views) ``` |-- views ``` ## 项目建立步骤 ```bash #1. 项目建立 npm install #2. 启动项目 npm run dev #3. 打包项目 npm run build ``` ## 技术栈 - vue-cli3.0 - vue - vue-router - vuex - element-ui 2.13.2 - scss - axios - AntV/g2plot - wangeditor - gaode-group - baidu-group - [ ] docker - [ ] nodejs - [ ] mock