# 弘则研究财务报表后台管理系统 ## 运行 1. npm install -- 安装依赖 -- 2. npm run dev -- 本地调试 -- 3. npm run build.test -- 测试环境打包 -- 4. npm run build -- 生产环境打包 -- 5. node --version = 16.0.0 ## 开发文件目录 1. /src/api 服务端api接口配置 2. /src/assets 静态资源文件夹 + svg-icons文件夹 - 自定义svg图标组件所加载的文件夹 3. /src/components -- 全局组件文件夹 + mPage.vue -- 分页器 4. /src/directives 自定义指令文件夹 + buttonPermission.js -- 按钮权限控制指令 5. /src/layout 页面外层框文件夹 6. /src/router 路由文件夹 7. /src/store vuex状态管理 + modules -- 模块文件夹 + index.js -- 批量导入modules中的文件,创建状态管理器 + namespaced:true -- 各模块的命名名称为文件名 例如:state.user.token 、dispatch('router/setRoutes') 8. /src/styles 样式文件夹 + 修改element-plus主题样式文件:element.scss 9. /src/utils 工具函数文件夹 + request.js -- axios请求函数封装工具 + validators.js -- 复用的表单验证项工具 10. /src/views 页面文件夹 11. permission.js 全局路由守卫 ## 开发说明 1. 项目对element-plus做了按需导入和自动导入,也对vue中的方法做了自动导入,在.vue文件中使用element-plus和vue的组件和方法是不需要引入 但是对于element-plus的命令式组件 例如ElMessage和ELMessageBox还需自己引入。 引入的组件和方法在 auto-imports.d.ts 和 components.d.ts 可查看。 由于项目需要引入elemet-plus的所有图标库,所以对于element-plus的图标并没有做自动和按需导入 2. 项目路由分为固定路由和动态路由,固定路由配置在 **/src/router/index.js** 中,动态路由从服务端获取,存入到vuex中,并通过router.addRoute()方法 注入到router中,详情请看store的router模块的 **setRoutes** 方法。 需要加入权限管理的按钮也需要存入vuex中,详情请看store的router模块的 **getPermissionButtons** 方法。 3. 在开发完一个页面或者模块时,需要到菜单管理模块添加路由,目前项目的菜单等级包括按钮等级只到三级,所以三级菜单下的按钮请添加到对应的二级菜单下 1. 添加/编辑菜单 + 上级菜单 -- 返回前两级的菜单,不选择则为一级菜单 + 路由名称 -- route中的name属性 + 路由地址 -- 这一级别的路由,不是完成的路由、 + 组件路径 -- 文件路径,从views文件夹开始的路由,不带上文件名 例如 views/systemManagement/menuM + 是否隐藏 -- route中的hidden属性,控制是否在左边的导航栏显示 + 是否有Layout -- 这个页面是否在外层框架下面 2. 做三级路由时请注意,其实并没有真的三级路由,只是面包屑想要显示三级,真的还不如做个全屏的弹窗,还不用页面间传递参数。 三级路由是在二级路由的页面中放入一个router-view,然后跳转到三级页面时将这个二级页面的对应内容去掉。具体请参照 **views/systemManagement/roleM.vue** 角色管理页面,如果有更好的方法可以在该文档中写上。 4. 一些按钮或者区域需要加入到权限控制时,需要permission自定义指令,指令接受的参数值为添加按钮时的按钮ID 1. 添加/编辑按钮 + 上级菜单 -- 该按钮绑定在哪级菜单下,注意三级菜单的按钮需要绑定到二级菜单下 + 菜单标题 -- 设置角色权限时的区分,暂时并不会真的修改到按钮的文本 + 按钮ID -- 按钮权限控制的唯一标识,唯一不能重复。 + 为了避免按钮Id重复,使用菜单各级别的名称:按钮作用标识,例如 添加部门 -- system:dept:add 5. 本项目封装了svg图标组件 => src/components/SvgIcon/index.vue 1. 组件会加载 src/assets/svg-icons 文件夹下面的svg图片,需要图标方式使用的svg图片的请放到该文件。 + 使用方式:svgIcon的 name 属性为 svgIcon-[dir]-[name] svgIcon:前缀 dir:文件夹名 name:文件名 表示使用 'dir'文件夹下的'name'文件名的svg图片 2. 使用的svg图片如果不需要改变颜色,就可以直接使用;需要通过属性改变颜色需要对svg文件做一些修改,如 - 菜单图标 + 对需要变色的区域做一些修改。 + 使用v-bind修改颜色:需要将需要修改颜色的标签的fill属性去除 方可通过v-bind方式修改颜色 svgIcon上的color属性 + 使用css修改颜色:需要将需要修改颜色的标签的fill属性的值设为'currentColor' ,方可通过css修改颜色。 + 两种方式可以混用。 3. **import ids from 'virtual:svg-icons-names'** 可以获取所有图标的symbolId,即为svgIcon的name属性,返回值为一个数组。 ### 提示:开发之前可以瞅一眼 组件封装和工具函数的文件夹 看是否有你需要的东西,能省点事就省点事嘛.