>[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`數據渲染層