介绍

前端是基于 ElementPlugs 开发，支持 Chrome、Edge、Firefox、Safari 等现代主流浏览器。您可以访问 ElementPlugs 官网文档去查阅基础组件 API，您还可以查阅 AgileBPM 基础组件 API

快速开始

安装

建议使用 VSCode 开发，请务必安装必备插件

检查环境， node16 或 18 ，在项目跟目录打开命令窗口
安装依赖 npm install

建议通过 yarn install 或者 cnpm install 安装依赖（cnpm，则必须用 cnpm8.2.0 版本 cnpm 安装教程 npm install cnpm@8.2.0 -g --registry=https://registry.npmmirror.com）

启动服务 npm run dev

初次设置

在开始开发前，有一些内容需要提前一次性设置，分别是：

选择合适的 vsCode 插件用于开发 vsCode 插件请参考 vscode 配置插件。

2.标题通用后缀修改

后缀分别为加载雪花屏的标题、页面的标题、浏览器的标题，位于src/config/setting.config.js 中 title 配置，以及简写 abbreviation 配置

更换网站 logo：
- 使用 svg 作为 logo（推荐）：将你喜欢的 svg 图标放到src/remixIcon/svg下，src/config/settings.js中的 logo 配置为你 svg 的名字即可
- 使用 img 图片作为 logo（不推荐）：自行修改 src/vab/components/logo.vue 源码即可

setting.js 业务配置

请参考 src/config/setting.config.js 文中描述

前端工程目录

	├─agilebpm  		agilebpm 相关组件的目录
	│  ├─package
	│  │  ├─ab-bpm		流程相关组件
	│  │  ├─ab-form		表单组件
	│  │  ├─form-design	表单设计器
	│  │  ├─bpmn-design	流程设计器
	│  │  └─ab-core		核心套件
	├─src
	│  ├─api				后端服务接口 API 定义
	│  │  ├─auth
	│  │  ├─biz
	│  │  ├─bpm
	│  │  ├─cms
	│  │  └─sys
	│  ├─assets			静态资源目录
	│  ├─config			配置文件目录
	│  ├─i18n			国际化配置
	│  ├─libs			第三方组件二次开发
	│  ├─router			路由配置，不同模块在 modules 目录下
	│  ├─store			状态管理，不同模块在 modules 目录下
	│  └─views			前端页面
	│      ├─biz
	│      ├─bpm			流程模块页面
	│      ├─cms
	│      ├─index
	│      ├─login
	│      ├─org
	│      └─sys			系统模块页面
	│
	└─types		平台一些 TS 类型定义

新增页面

增加一个新的页面，需要 3 步：

创建新的 .vue 页面文件，请参考通用列表页规范
在路由中添加新页面
在菜单中配置该页面

以下是具体使用方法：

创建新的 .vue 页面文件

所有的页面文件在 /src/views 目录下管理，处于可维护性考虑，对页面按模块进行了目录拆分，请根据模块添加文件

在路由中添加新页面

一个页面主要分为两类：

在主框架内的页面，即包含了顶部、侧边栏、多页签等基础布局（大部分页面应当属于此类型）
在主框架外的页面，常见的有首页、登录 / 注册 / 注册结果页，它们较独立，没有其他布局

打开路由配置文件 src\router\index.ts 。

如果是主框架外的页面，将路由配置添加在 constantRoutes 中，它不含有基础布局。

如果是主框架内的页面，则将路由配置添加在 asyncRoutes 中。

由于框架内的页面通常较多，处于可维护性考虑，我们分了模块，比如组织路由 src\router\modules\org.ts

路由的关键参数说明

{
  "name": "Demo", 				//首字母大写，一定要与vue文件的name对应起来，name名不可重复，用于缓存控制【该项特别重要】
  "path": "/", 					//为路径，会带上父级路径一起拼接成为 路由地址
  "component": "Layout", 		//vue的文件路径,第一级路由固定为Layout
  "redirect":"" 				//重定向到子路由，格式从第一级路由开始拼接（默认可不写）
  "meta": {
    "title": "title", 			//菜单、面包屑、多标签页显示的名称
    "icon": "", 				// 会优先使用后台菜单的路由
    "noKeepAlive": true, 		//当前路由是否不缓存，默认缓存（默认值：false）
    "noClosable": true, 		//当前路由是否可关闭多标签页
    "noColumn":false, 			//是否隐藏分栏，仅在分栏布局中二级路由生效（默认值：false）
    "badge": "New", 			//badge小标签（只支持子级，String例行，支持自定义）
    "tabHidden": true, 		//当前路由是否不显示多标签页（默认值：false，不推荐使用）
    "target": "_blank", 		//是否浏览新标签页打开（不适用于分栏布局左侧tab部分）
    "activeMenu": "", 			//高亮指定菜单，要从跟路由的path开始拼接
    "dot": false, 				//小圆点（默认值：false）
    "dynamicNewTab": false, 	//动态传参路由是否新开标签页（默认值：false）
    "breadcrumbHidden": true, 	//面包屑是否显示（默认值：false）
    "children": [{...},{...}],
  },
}

请注意，路由的 title ，icon 最终都会被系统菜单的在线配置所代替。

路由常见问题

设置 cache 后缓存无效如果缓存无效请注意路由的 name 和 .vue 页面组件的 name 要保持一致。

在菜单中配置该页面

在系统-系统资源中新增菜单资源

选择需要添加菜单的父目录，点击添加
输入资源信息
- 资源名：菜单的名字，会覆盖路由 title（国际化版本需要在内容管理-翻译管理中定义国际化别名为 menu.资源别名）
- 资源别名：唯一的 CODE，按钮权限中它用于鉴权标识
- 请求地址：为路由地址，按钮权限中，该资源地址为接口后端访问的地址，同时也会通过地址匹配权限
- 默认展开：菜单默认会以展开形式展现

构建和发布

构建

在终端执行命令进行项目打包： $ npm run build

构建打包成功之后，默认会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 **.js 、*.css、index.html 等静态文件。

发布

前端是典型的 SPA 类型的工程，打包后的文件分为 index.html 和其它静态资源，整个项目只有 index.html 这一个入口文件，其它都是 Webpack 来管理的了。

所以，发布一个 SPA 项目，核心就是渲染这个 index.html 以及静态资源的位置。

一般来说，你可能使用 Nginx、Apache 等渲染这个入口文件 index.html，也可以使用 CDN 的服务，比如七牛。更多资料可以查阅 vue 官方文档

通用列表页规范

列表页面建议混入 abTableMix 组件，它内置了 search,reset,handleCollapse,delBySeletedIds 这些列表页通用的方法。具体请参考用户列表页面 src\views\org\user\userList.vue，具体 ab-table 组件功能可以到 api 章节查阅。

通用编辑页规范

编辑页请参考 src\views\org\role\roleEdit.vue，主要使用了 ab-save 组件，ab-load 组件用于简化部分代码。

vscode 必备插件

vscode 下载地址必备插件安装

local-history (opens new window)local-history]（强烈推荐，必须安装，可找回丢失代码）
eslint (opens new window)eslint（必须安装，建议开启 Eslint 保存时自动修复）
stylelint (opens new window)stylelint（必须安装）
Prettier - Code formatter (opens new window)代码自动格式化（必须安装）
volar (opens new window)vue3 开发必备
Auto Import (opens new window)import 引入自动补全（推荐安装）
Import Cost (opens new window)查看你引入的依赖模块大小（推荐安装）
Auto Close Tag (opens new window)自动补全 html 标签（推荐安装）
Auto Rename Tag (opens new window)自动重命名 html 标签（推荐安装）
vscode-element-helper (opens new window)element 开发必备（推荐安装）
docthis (opens new window)注释插件（可不安装）
Git History (opens new window)查看 git 提交历史（可不安装）
Svg Preview (opens new window)svg 查看器（可不安装）

介绍 #

快速开始 #

安装 #

初次设置 #

setting.js 业务配置 #

前端工程目录 #

新增页面 #

创建新的 .vue 页面文件 #

在路由中添加新页面 #

路由的关键参数说明 #

路由常见问题 #

在菜单中配置该页面 #

构建和发布 #

构建 #

发布 #

通用列表页规范 #

通用编辑页规范 #

vscode 必备插件 #

介绍