# vue-element-admin-zero-财务预算管理系统 **Repository Path**: zero_fsc/vue-element-admin-zero-budget ## Basic Information - **Project Name**: vue-element-admin-zero-财务预算管理系统 - **Description**: 基于vue-element-admin-zero 实现的财务预算管理系统 前端源码 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 5 - **Forks**: 2 - **Created**: 2020-12-18 - **Last Updated**: 2025-07-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## budget-front-end ## 项目描述 ``` 此项目当前主要用针对个人毕业设计所设计的前端Vue后台管理系统， 可用于完成中小型系统的后台开发 目前正应用此框架对学院 选修课管理系统 财务预算管理系统 进行二次重构型开发 个人毕业设计，主要用于学院财务处办公、报账、审核等功能 项目目前正在开发中 ``` ## ## 当前开发已完成 - [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响应式 - [x] mock数据 结合express生成接口 - [x] axios二次封装 基于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模块 | |—— add.js 新增api模块 | |—— delete.js 删除api模块(单个删除 批量删除) | |—— change.js 修改api模块 | |—— single.js 查看单个详情api模块 | |—— get.js 列表api模块 | |—— ... |—— assets 静态资源目录 | |—— icons 图标目录 | | |—— index.js 导出 icon 模块 | | |—— icon icon目录 | | |—— svg svg目录 | |—— images 图片目录 |—— components 组件目录(element、AntV、百度地图Api、高德地图Api) | |—— index.js 导出组件模块(方便管理) | |—— YlButton button组件(开发中) | | |—— 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 select组件 | | |—— index.js | | |—— src | | |—— index.vue | |—— YlDialog dialog组件(开发中) | | |—— index.js | | |—— src | | |—— index.vue | |—— YlDrop drop组件 | | |—— index.js | | |—— src | | |—— index.vue | |—— YlEditor 富文本编辑器 | | |—— index.js | | |—— src | | |—— index.vue | |—— YlForm form组件 | | |—— form.vue 父组件 | | |—— formItem.vue 子组件[汇总合并分组件(select、input、upload等)] | | |—— index.js 导出 form 组件 | | |—— src | | |—— upload.vue upload组件 | | |—— ... | |—— YlMap 地图组件 | | |—— baidu 百度地图 | | | |—— index.js | | | |—— src | | | |—— index.vue | | |—— gaode 高德地图 | | |—— index.js | | |—— src | | |—— index.vue | |—— YlLayout layout组件 同步于 public/Layout | | |—— Header 头部 | | | |—— index.js | | | |—— src | | | |—— index.vue | | |—— Menu 菜单(动态递归菜单) | | | |—— index.js | | | |—— menu.md | | | |—— src | | | |—— index.vue | | | |—— menuItem.vue | | |—— YlBread 面包屑 | | |—— index.js | | |—— src | | |—— index.vue | |—— YlPage page组件 | | |—— index.js | | |—— src | | |—— index.vue | |—— YlTable table组件(开发中) | |—— index.js | |—— src | |—— index.vue | |—— template.vue |—— environment 环境前置请求路由(主要用于通用前置http) | |—— global.js 全局前置http模块(当前主要用于ftp服务) |—— error 常见错误页面目录 | |—— 404 404 | | |—— index.js 导出404模块 | | |—— src | | |—— index.vue | |—— 500 500 | |—— index.js 导出500模块 | |—— src | |—— index.vue 菜单数据 | |—— ... |—— mock mock数据目录 | |—— menu.js 菜单数据 | |—— ... |—— 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目录 | |—— crumb.js 菜单模块 | |—— users.js 用户模块 |—— style 样式目录 | |—— index.js 导出 style 实例(方便管理) | |—— src 样式表 | |—— common.scss 自定义样式 | |—— element.scss 针对element的样式 | |—— global.scss 用于响应式样式 | |—— public.scss 公共样式 | |—— text.scss 字体样式 |—— utils 工具目录 | |—— auth.js 操纵用户信息 | |—— http.js axios封装 | |—— index.js 常规工具函数 | |—— modal.js 弹出框 | |—— storage.js 缓存 | |—— verifiable.js 正则验证 |—— views/ 页面目录 |—— .editorconfig |—— .gitignore |—— 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 |-- container | |-- index.js | |-- src | |-- index.vue |-- demo | |-- index.js | |-- src | |-- index.vue |-- homePage | |-- index.js | |-- src | |-- index.vue |-- word |-- editor | |-- index.js | |-- src | |-- index.vue |-- textarea |-- index.js |-- src |-- index.vue ``` ## 项目建立步骤 ```bash #1. 项目建立 npm install #2. 启动项目 npm run dev #3. 打包项目 npm run build ``` ## 项目图片 --- 仅为初始框架时部分功能截图 ### 登陆界面 ![](http://106.12.102.124/ftp/login.jpg) ### 主页 ![](http://106.12.102.124/ftp/index.jpg) ### 组合demo ![](http://106.12.102.124/ftp/demo.jpg) ### 组合demo新增 修改 ![](http://106.12.102.124/ftp/add.jpg) ## 技术栈 - vue-cli3.0 - vue - vue-router - vuex - element-ui 2.13.0 - scss - axios - AntV/g2plot - wangeditor - gaode-group - baidu-group - [ ] docker - [ ] nodejs - [ ] mock