>[info] 目前Vue3已經支持兩種模式：Online在線模式 和 GUI模式代碼生成。 > JeecgBoot版本要求： 3.2.0+ ( 提供了vue3、vue3Native模板目錄 ) [TOC] # Online在線代碼生成 ## 第一步：通過online表單在線建表 > jeecg提供了在線建表的功能，找到菜單： `在線開發 -> Online表單開發`配置完表單，點擊同步數據庫，會在數據庫生成表。  ## 第二步：Online表單字段控件配置 > online表單字段的控件類型，支持 下拉、radio、checkbox、選擇人、選擇部門、popup、下拉搜索、省市縣、下拉多選等，已經滿足在線低代碼開發需求 ， [Online表單專題視頻](https://www.bilibili.com/video/BV1zJ411t7FG)  ## 第三步. 生成代碼界面 > 點擊online表單上方的代碼生成按鈕，選中需要生成的表單，就可以調出代碼生成的界面 - 3.1 單表界面  - 3.2 一對多界面  一對多的online表代碼生成界面，標注的都是可以修改的，正常情況只需要修改包名，其它可以根據自己情況修改 - 3.3 online表單一對多，外鍵配置注意 ~~~ // 子表外鍵配置說明7 a) 子表引用主表主鍵ID作為外鍵，外鍵字段必須以_ID結尾，例如 ORDER_ID b) 主表和子表的外鍵字段名字，必須相同（除主鍵ID外）; ~~~  - 3.4 生成代碼動圖演示  ## 第四步. 生成代碼結構 >[info] 如果選擇生成代碼目錄，直可以接選擇到生成到那個模塊，這樣java代碼不需要再手工調整，只需要將前端代碼復制到前端vue項目中。 前端如下： - 4.1 vue3模板目錄 > 需要哪個vue版本的頁面，復制哪個目錄下的代碼到前端項目即可  - 4.2 vue3Native模板目錄 > - vue3目錄表單采用的是vben json結構寫法，這種寫法簡單表單比較方便也好維護，但是復雜表單就麻煩了。所以提供了原生寫法表單模板 > - vue3Native目錄下的表單，采用原生antd寫法，非vben封裝表單。 > - 請用戶按照自己的需求靈活選擇。  - 4.3 前端代碼存放位置 >[danger]需要放在view文件夾下面  ## 第五步：配置菜單SQL vue3目錄下會生成插入菜單的sql，直接執行即可。 >[info] 頁面對應的前臺目錄為`views/代碼生成時寫的包名` 文件夾下，如果你想更改到其他目錄，需要修改sql中component字段對應的值 - 5.1 動態效果圖演示  - 第六步：角色授權 生成代碼后通過角色授權菜單，授權成功后刷新頁面即可看見新增的菜單