>[info]本章介绍一下前端模板 `vue`和`vue3Native`的区别 >目前Vue3 通过Online代码生成支持vue3和vue3Native > JeecgBoot版本要求： 3.2.0+ ( 提供了vue3、vue3Native模板目录 ) [TOC] ## 目录结构介绍  >[info]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）：表单弹窗渲染页面  >[info]vue3Native * `*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的区别 >[info]vue3和vue3Native主要区别为：`vue3`表单数据和查询数据均在`*.data.ts页面`，均以json的格式进行填写，而`vue3Native`以`Ant Design Vue`原生写法实现，更加灵活，下面让我们一起来看一看吧 >[info]vue3的数据渲染页面均写在`*.data.ts`页面，如 >查询区域 * 数据  * 页面  >表单区域：均写在了`*Modal.vue`页面 * 数据  * 页面  >[info]vue3Native的数据渲染 >查询区域，写在了`*List.vue`的开头部分  >表单区域：将`modal`层和`From`层分离开，方便维护，更加灵活 * `modal`弹窗层  * `Form`数据渲染层