%20(2).svg)
项目简介
本项目是以 vue-cli 4.x、vue 2.x 等为技术栈，基于 qiankun 微服务构建的行政管理系统。通过数字化管理提升企业行政事务处理的效率与准确性，解决传统纸质管理效率低下的问题。采用微服务架构，增强了系统的灵活性与可维护性，具备完善的登录、任务管理、文件管理等功能。
项目的主要特性和功能
主要技术栈
- 前端框架：vue-cli 4.x、vue 2.x、vue-router、vuex
- UI 框架：element-ui
- 样式处理：scss
- 数据交互：axios
- 类型检查：typescript
- 微服务架构：qiankun
核心功能
- 登录与权限管理：支持多种登录方式，可根据后台菜单进行精细权限控制，实现路由转菜单等权限处理。
- 行政任务管理：提供任务的创建、查看、编辑和删除功能，具备任务提醒和通知机制。
- 文件管理：支持文件的上传、下载、分类管理以及文件预览功能。
- 日程管理：可进行日程安排和查看，支持多人协同编辑日程，并具备日程提醒功能。
其他特性
- 响应式设计：系统界面能在不同设备上自适应显示，提供一致的用户体验。
- 多语言支持：通过相关配置可实现多语言切换，满足不同地区用户需求。
安装使用步骤
假设用户已经下载了本项目的源码文件，可按以下步骤进行操作：
1. 连接内网：使用 VNP 连接公司内网环境，连接成功标准为 ping 10.12.102.194 有响应，如 ping 不通，请检查账号权限。
2. 配置私有仓库：
- 使用 npm 直接配置：npm config set registry http://10.12.102.194:4873
- 推荐使用 nrm 管理 registry：
- 安装 nrm：npm install nrm -g
- 添加 cci 私有仓库：nrm add cci http://10.12.102.194:4873
- 查看 registry 列表：nrm ls
- 使用 cci 私有仓库：nrm use cci
3. 安装依赖：
- 使用 npm 安装：npm install
- 推荐使用 yarn 安装：
- 安装 yarn：npm install yarn -g
- 使用 yarn 安装依赖：yarn
4. 开发模式：可使用以下两种命令之一启动开发模式：npm run dev
5. 项目构建：npm run build
6. 代码格式校验：npm run lint
本地开发说明
- 使用本地开发时，使用静态路由的方式如下：
- 在 env 环境变量中，设置
VUE_APP_CAS="0"，VUE_APP_LOCAL_MENU="1" - 在 router 中 static 配置好静态路由
- 在 env 环境变量中，设置
- 在 env 中配置项目名
VUE_APP_NAME和项目部署路径VUE_APP_BASEURL，项目路径一般为/项目名/，考虑后期部署的情况不推荐使用/路径，在 env 中配置的环境变量，需要三个环境同时配置。 - 在使用 localStorage 和 sessionStorage 时，key 名需要在前面加上项目名和下划线，例：
command_user。 - layout 页面布局请根据项目具体需求进行调整，可参考公司项目中的几种常见布局方式。
- 调试接口时，在 vue.config.js 中配置代理，接口前缀路径开发，生产保持一致，上线是，能做到代理的一致性。
- 所有接口放在 src/api/modules 下面，进行分模块建文件，统一使用 src/api/request.js 作为基础请求对象，与所需业务不符时，使用 axios 或修改 request.js。
- 资源文件统一存放在 src/assets 中，引入的时候，尽量使用
~@相对于 src 这种方式，能使用 svg 的资源，尽量使用 svg。 - svg 文件放在 src/icons/svg 中，命名使用 camelCase 规则，禁止使用中文名。
开发规范
代码格式规范
使用项目中所配置的 eslint 进行格式化和规范。
组件和页面结构规范
- 组件和页面结构遵循从上往下 template，script，style 的结构。为组件根元素设置一个 class 使用 scss 加 scoped，一般所有样式放在根 class 下。一般不使用 id，组件中使用 id，首选随机 id，需要外部使用的尽量外部使用 ref 获取组件。应尽量避免操作 dom。
- 组件：组件放入 components 中，必须命名 name，文件名与组件名相同，以 PascalCase(首字母大写)命名，以 index.js 导出组件，组件具体内容放在其下 src 文件夹中，具体文件结构参见 components 中的 Editor 文件。单个页面或模块中的组件，放在其目录下的 components 中。
- 页面：页面放在 views 中，根据项目模块进行文件夹划分，一般根据菜单进行目录构建，使用 kebab-case(短横线分割)的命名方式，每个页面中，使用 index.js 导出页面，页面内容放在 src 中进行编辑。
样式规范
- 全局样式放入 styles 中。
- 公共的 scss 放入 styles/mixin 中，mixin 已全局注入，无需重复引入。
- 页面内，或组件内修改公共组件样式时，需要带上自定义的类名来增加命名空间。全局所有修改时不用添加，一般不建议全局修改。
- 父组件中修改子组件样式时，使用
>>>。
注释规范
- 除开一些功能明了，过度统一的文件，所有文件头部必须添加注释，vscode 中，可以使用这个插件进行注释 koroFileHeader。
- data 中的变量，注释一般放在其后。
- 方法的注释，需要说明方法用途，入参，出参。
- 在复杂的逻辑、临界、特殊情况的时候，需要添加注释说明。
命名规范
使用英文，禁止使用中文以及拼音，js/文件名一般使用 camelCase(驼峰命名)，html 使用 kebab-case(短横线分割)：
1. 组件：PascalCase(首字母大写)命名方式，导入后，在 template 中使用 kebab-case，自闭合 <is-demo/>。
2. html：标签名使用 kebab-case，class 使用中横线连接。
3. js：以一般使用 cameCase 命名变量，函数。
- boolean 类型变量使用 "is"、"has"、"can"、"should" 同理，例：isXxx。
- 常量使用大写加下横线。
- 事件监听函数使用 onXxxx。
- 作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。
- 循环变量可以简写，比如：i，j，k 等。
其他规范
- 使用箭头函数代替
let _this = this。 console.log()、debugger调试完成后要删除。if、else禁止使用简写，必须跟{}。- 表达式和语句应清晰、简洁，易于阅读和理解，避免使用晦涩难懂的语句。使用圆括号明确表达式执行优先级。
git commit 规范
- type 用于说明 Commit 的类型，包含以下 7 种类型：
- feat：新功能（feature）
- fix：修补 bug
- docs：文档（documentation）
- style： 格式（不影响代码运行的变动）
- refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）
- test：增加测试
- chore：构建过程或辅助工具的变动
示例：
bash
git commit -m "feat(views/login): 登录页功能及其接口对接"
修订记录
| 序号 | 修改时间 | 修改人 | 版本 | 备注 | | :--: | :--------: | :----: | :---: | :--: | | 1 | 2020-04-28 | 文林 | 0.1.0 | 初稿 |
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】