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