# 工作流-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 查看器(可不安装)