跳到主要内容

模板说明

Vue3 支持两种风格代码生成​

  • vue3封装表单 Vue3版vben风格包装写法vue3

  • vue3原生表单 Vue3版原生写法未经过包装vue3Native

vue3和vue3Native主要区别为：
`vue3`表单数据和查询数据均在`*.data.ts页面`，均以json的格式进行填写，
而`vue3Native`以`Ant Design Vue`原生写法实现，更加灵活

模板见截图

模板 vue3和vue3Native的区别​

本章介绍一下前端模板 vue和vue3Native的区别

目前Vue3 通过Online代码生成支持vue3和vue3Native

JeecgBoot提供两套风格的vue3代码生成，分别是 Vue3原生和Vue3(经过封装的)

目录结构​

vue3包装表单​

  • *list.vue如（TestCustomerList.vue）：vue列表页
  • *.data.list如（TestCustomer.data.ts）：数据页面，包含列渲染数据、查询区域渲染数据及表单渲染数据，以json的方式进行配置
  • *.api.ts如（TestCustomer.api.ts）：接口页面
  • *.sql如（TestCustomer_menu_insert.sql）：可执行的菜单升级sql
  • *Modal.vue如（TestCustomerModal.vue）：表单弹窗渲染页面

vue3原生表单​

  • *list.vue如（TestCustomerList.vue）：vue列表页
  • *.api.ts如（TestCustomer.api.ts）：接口页面
  • *.sql如（TestCustomer_menu_insert.sql）：可执行的菜单升级sql
  • *Modal.vue如（TestCustomerModal.vue）：弹窗页面
  • *Form.vue如（TestCustomerForm.vue）：表单渲染页面

vue和vue3Native本质区别​

vue3和vue3Native主要区别为：vue3表单数据和查询数据均在*.data.ts页面，均以json的格式进行填写，而vue3Native以Ant Design Vue原生写法实现，更加灵活，下面让我们一起来看一看吧

vue3的数据渲染页面均写在*.data.ts页面，如

查询区域

  • 数据
  • 页面

表单区域：均写在了*Modal.vue页面

  • 数据
  • 页面

vue3Native的数据渲染

查询区域，写在了*List.vue的开头部分

表单区域：将modal层和From层分离开，方便维护，更加灵活

  • modal弹窗层

  • Form数据渲染层

准备的要生成的表​