目前設計平臺前端是獨立部署的，引入了 Angular 和 Vue，您可以根據自己技術強項 選擇使用 Angular 或者 Vue，他們引入的成本都很小。

比如我們團隊使用 Angular 很多年了，依賴注入，模塊化概念很舒服，使用它構建復雜應用非常得心應手，自然會傾向 Angular

但是更多人喜歡使用更高效更簡單的 Vue，他的入門成本很低，性能很好 當然也是很不錯的選擇，我們也推薦您使用 Vue 。

前端引入模塊

我們使用 webpack 把某類引入打包成了一個文件，這樣可以減少 js 體積以及請求數量，加快加載速度，而且模塊化可以減少對全局作用域的污染。

目前前端含一下模塊：

base 模塊 ：平臺公共必備組件的引入，一般為jQuery組件，均以注冊到 jQuery 的形式暴露給全局作用域

ng-edit 模塊 ： Angular js 相關的 公共服務，并將 angular 暴露到全局作用域

vue-edit 模塊 ：Vue js 相關的 公共組件，將 Vue 暴露給全局作用域

grid 模塊 ：用于列表頁面 公共js的引入，只有BootstrapTable.js 一個引用

列表頁面默認不需要 雙向綁定組件，列表數據中監控數據變化存在頁面性能問題，所以默認列表頁面不提供 Angular引入，如有需要可以單獨引入

前端開發介紹

配置后端服務地址配置 assets/app-conf.js

webpack 打包配置： /agilebpm-ui/webpack.config.js

webpack 相關打包的引入文件配置 /agilebpm-ui/assets/entry

開發

AgileBPM 僅對基礎模塊進行了打包，如果您這邊不是對基礎模塊進行的修改則無需打包安裝的

初次開發需要執行 node命令安裝依賴 npm install

開發時執行 npm run source 監控前端文件變化并實時打包，您可以開啟npm run source 模式下去調試開發基礎模塊的源碼

完成開發后執行打包命令 npm run build ，最后提交打包后的文件

注意：angular js 不支持混淆模式的打包，所以默認打包命令屏蔽了相關引入，具體請查看 /agilebpm-ui/webpack.config.js 引入描述，設置非混淆時才能打包相關引入。

前端分離開發時可以使用 npm run dev 使用 webpack server 單獨跑前端項目(如果是agilebpm-ui 以 jar 形式時運行前端，則可以忽略該方式)

JS 引入情況

前端 目錄├─assets資源目錄

│ ├─cssCSS

│ ├─entrywebpage打包入口

│ │ ├─common公共JS打包引入

│ │ └─home

│ ├─fonts字體圖標

│ ├─img圖標LOG等資源

│ ├─jsJS

│ │ ├─common公共js

│ │ ├─platform平臺模塊js

│ │ │ └─util

│ │ └─plugins

│ └─vueVUE表單相關js引入

├─bpm流程模塊HTML源代碼

├─bpmplugin流程插件HTML源代碼

├─buildwebpack 打包后的壓縮文件

│ ├─commonwebpack 打包的公共JS引入

│ ├─font

│ ├─form

│ ├─home

│ └─images

├─bus業務對象模塊HTML源代碼

├─demo案例模塊HTML源代碼

├─flow-editor流程設計器源代碼

├─form表單模塊HTML源代碼

├─org組織模塊HTML源代碼

└─sys系統模塊HTML源代碼

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的agilebpm脑图_设计开发平台前端框架介绍 | AgileBPM 敏捷工作流开发平台—开源免费-基于 Activiti 工作流引擎、Flowable...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。