# 工作流-OA-低代码-表单-的前端工程-vue3-ts 

**Repository Path**: agile-bpm/agilebpm-ui

## Basic Information

- **Project Name**: 工作流-OA-低代码-表单-的前端工程-vue3-ts 
- **Description**: 工作流-OA-低代码表单的 前端工程，基于 Activiti7 Vue3 TS ElementPlus Vite，支持三种布局，自定义主题，同时也是比较完善的前端脚手架。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: http://www.agilebpm.cn
- **GVP Project**: No

## Statistics

- **Stars**: 961
- **Forks**: 411
- **Created**: 2018-07-11
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: workflow

**Tags**: None

## README

 
# agile-bpm-basic  前端工程介绍

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

## 快速开始

#### 安装

建议使用 **VSCode** 开发，请务必安装[必备插件](./qianduan.html#vscode-必备插件)

1. 检查环境， node16 或 18 ，在项目跟目录打开 命令窗口 

2. 安装依赖 `yarn install`

3. 启动服务 `npm run dev`

#### 初次设置

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

1. 选择合适的 vsCode 插件用于开发
   vsCode 插件请参考 [vscode 配置插件](./qianduan.html#vscode-必备插件)。
 
3. 更换网站 logo：
   -  `public\img\logo.png`
   - `public\img\logo-r.png`

#### 配置

项目基本配置:`src\config\defaultConfig.ts` 
请求配置: `.env`

## 前端工程目录

```
agilebpm-ui
├── src
│   ├── api			           API 接口定义位置
│   ├── assets		             	静态资源
│   ├── components	           前端组件  		
│   ├── config		             	系统配置				
│   ├── hooks		             	
│   ├── icon		             	
│   ├── layout		             	前端框架的布局
│   ├── main.ts                 入口 mian js 
│   ├── router                  路由 
│   ├── store                   状态管理
│   ├── style                   css
│   ├── utils                   工具类
│   ├── views                  
│   │   ├── biz              页面部分  
│   │   ├── bpm                
│   │   ├── cms                
│   │   ├── home               
│   │   ├── login              
│   │   ├── news               
│   │   ├── org                
│   │   ├── sys                
├── types                      类型
├── package.json               引入
├── prettier.config.js         风格定义
└── vite.config.ts             vite 配置



```

## 新增页面

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

- 创建新的 `.vue` 页面文件，请参考 [通用列表页规范](./qianduan.html#通用列表页规范)
- 在路由中添加新页面
- 在菜单中配置该页面

以下是具体使用方法：

#### 创建新的 .vue 页面文件

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

#### 在路由中添加新页面

一个页面主要分为两类：

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

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

如果是主框架内页面，将路由配置添加在 `layout` 的children 中,它含有基础布局。
其他页面请不要放在  `layout` 的children 中 ，如登录页面

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

#### 路由常见问题

- 设置 cache 后缓存无效，目前还未支持，下个版本会支持
  如果缓存无效请注意 路由的 name 和 .vue 页面组件的 name 要保持一致。

#### 在菜单中配置该页面

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

1. 选择需要添加菜单的父目录，点击添加
2. 输入资源信息
   - 资源名：菜单的名字，会覆盖路由 title
   - 资源别名：唯一的 CODE，按钮权限中它用于鉴权标识
   - 请求地址：为路由地址，按钮权限中，该资源地址为接口后端访问的地址，同时也会通过地址匹配权限
   - 默认展开： 菜单默认会以展开形式展现

## 构建和发布

#### 构建

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

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

#### 发布

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

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

一般来说，你可能使用 Nginx、Apache 等渲染这个入口文件 index.html，也可以使用 CDN 的服务，比如七牛。
更多资料可以查阅 [vue 官方文档](https://cli.vuejs.org/zh/guide/deployment.html#pwa)

## 通用列表页规范

列表页面建议混入 `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 [下载地址](https://code.visualstudio.com/) 必备插件安装

- 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 查看器（可不安装）