diff --git a/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenComponentIndexScript.tpl b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenComponentIndexScript.tpl
new file mode 100644
index 000000000..407093515
--- /dev/null
+++ b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenComponentIndexScript.tpl
@@ -0,0 +1,13 @@
+<template>
+  <{{ model.table_name }} />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import {{ model.table_name }} from './components/{{ model.table_name }}.vue';
+
+  export default defineComponent({
+    name: '{{ model.application }}',
+    components: { {{ model.table_name }} },
+  });
+</script>
diff --git a/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenModalViewScript.tpl b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenModalViewScript.tpl
new file mode 100644
index 000000000..8e586edae
--- /dev/null
+++ b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenModalViewScript.tpl
@@ -0,0 +1,79 @@
+<template>
+  <BasicModal
+    :title="L('{{model.application}}')"
+    :can-fullscreen="false"
+    :show-ok-btn="{{ model.has_submit }}"
+    :width="800"
+    :height="500"
+    @register="registerModal"
+    {{~ if model.has_submit ~}}
+    @ok="handleSubmit"
+    {{~ end ~}}
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  {{~ if model.has_submit ~}}
+  import { useMessage } from '/@/hooks/web/useMessage';
+  {{~ end ~}}
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
+  import { getModalFormSchemas } from '../datas/ModalData';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { {{ model.get_action }}{{ if model.has_create }}, {{ model.create_action }}{{ end }}{{ if model.has_update }}, {{ model.update_action }}{{ end }} } from '{{model.api_path}}';
+
+  const emits = defineEmits(['change', 'register']);
+
+  {{~ if model.has_submit ~}}
+  const { createMessage } = useMessage();
+  {{~ end ~}}
+  const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']);
+  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+    layout: 'vertical',
+    showActionButtonGroup: false,
+    schemas: getModalFormSchemas(),
+    transformDateFunc: (date) => {
+      return date ? formatToDateTime(date) : '';
+    },
+  });
+  const [registerModal, { {{ if model.has_submit }}closeModal{{ end }} }] = useModalInner((data) => {
+    nextTick(() => {
+      resetFields();
+      fetchEntity(data.{{ model.key }}) {
+          fetchEntity(data.{{ model.key }});
+      }
+    });
+  });
+
+  function fetchEntity(id: string) {
+  {{ model.get_action }}(id).then((dto) => {
+      setFieldsValue(dto);
+    });
+  }
+
+  {{~ if model.has_submit ~}}
+  function handleSubmit() {
+    validate().then((input) => {
+      {{~ if model.has_create && model.has_update ~}}
+      const api = input.{{ model.key }}
+        ? {{ model.update_action }}(input.{{ model.key }}, input)
+        : {{ model.create_action }}(input);
+      {{~ else if model.has_create ~}}
+      const api = {{ model.create_action }}(input);
+      {{~ else if model.has_create ~}}
+      const api = {{ model.update_action }}(input.{{ model.key }}, input);
+      {{~ end ~}}
+
+      api.then((dto) => {
+        createMessage.success(L('SuccessfullySaved'));
+        emits('change', dto);
+        closeModal();
+      });
+    });
+  }
+  {{~ end ~}}
+</script>
diff --git a/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenModelDataScript.tpl b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenModelDataScript.tpl
new file mode 100644
index 000000000..b3d633c01
--- /dev/null
+++ b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenModelDataScript.tpl
@@ -0,0 +1,40 @@
+import { useLocalization } from '/@/hooks/abp/useLocalization';
+import { FormProps, FormSchema } from '/@/components/Form';
+
+const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']);
+{{ if model.exists_search_models }}
+export function getSearchFormProps(): Partial<FormProps> {
+  return {
+    labelWidth: 100,
+    schemas: [
+      {{~ for searchModel in model.search_models ~}}
+      {
+        field: '{{ searchModel.name }}',
+        component: '{{ searchModel.component }}',
+        label: L('{{ searchModel.display_name }}'),
+        colProps: {{ searchModel.col_props }},
+      },
+      {{~ end ~}}
+    ],
+  };
+}
+{{ end }}
+export function getModalFormSchemas(): FormSchema[] {
+  return [
+    {{~ for inputModel in model.input_models ~}}
+    {
+      field: '{{ inputModel.name }}',
+      component: '{{ inputModel.component }}',
+      label: L('{{ inputModel.display_name }}'),
+      {{~ if !inputModel.show ~}}
+      show: false,
+      {{~ end ~}}
+      {{~ if inputModel.disabled ~}}
+      dynamicDisabled: true,
+      {{~ end ~}}
+      colProps: {{ inputModel.col_props }},
+      componentProps: {{ inputModel.component_props }},
+    },
+    {{~ end ~}}
+  ];
+}
diff --git a/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenTableDataScript.tpl b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenTableDataScript.tpl
new file mode 100644
index 000000000..ff0918936
--- /dev/null
+++ b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenTableDataScript.tpl
@@ -0,0 +1,28 @@
+import { useLocalization } from '/@/hooks/abp/useLocalization';
+import { BasicColumn } from '/@/components/Table';
+import { formatToDateTime } from '/@/utils/dateUtil';
+
+const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']);
+
+export function getDataColumns(): BasicColumn[] {
+  return [
+    {{~ for ouputModel in model.ouput_models ~}}
+    {
+      title: L('{{ ouputModel.display_name }}'),
+      dataIndex: '{{ ouputModel.name }}',
+      align: '{{ ouputModel.align }}',
+      width: {{ ouputModel.width }},
+      sorter: {{ ouputModel.sorter }},
+      resizable: {{ ouputModel.resizable }},
+      {{~ if !ouputModel.show ~}}
+      ifShow: false,
+      {{~ end ~}}
+      {{~ if ouputModel.has_date ~}}
+      format: (text) => {
+        return text ? formatToDateTime(text) : text;
+      },
+      {{~ end ~}}
+    },
+    {{~ end ~}}
+  ];
+}
diff --git a/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenTableViewScript.tpl b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenTableViewScript.tpl
new file mode 100644
index 000000000..f7a80297e
--- /dev/null
+++ b/aspnet-core/modules/cli/LINGYUN.Abp.Cli/LINGYUN/Abp/Cli/UI/Vben/Templates/VbenTableViewScript.tpl
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        {{~ if model.has_create ~}}
+        <Button
+          {{~ if model.create_permission ~}}
+          v-auth="['{{ model.create_permission_name }}']"
+          {{~ end ~}}
+          type="primary"
+          @click="handleAddNew"
+        >
+         {%{ {{ L('}%}{{ model.application }}{%{:AddNew') }} }%}
+        </Button>
+        {{~ end ~}}
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :stop-button-propagation="true"
+            :actions="[
+              {{~ if model.has_update ~}}
+              {
+                {{~ if model.update_permission ~}}
+                auth: '{{ model.update_permission_name }}',
+                {{~ end ~}}
+                label: L('Edit'),
+                icon: 'ant-design:edit-outlined',
+                onClick: handleEdit.bind(null, record),
+              },
+              {{~ end ~}}
+              {{~ if model.has_delete ~}}
+              {
+                {{~ if model.delete_permission ~}}
+                auth: '{{ model.delete_permission_name }}',
+                {{~ end ~}}
+                label: L('Delete'),
+                color: 'error',
+                icon: 'ant-design:delete-outlined',
+                onClick: handleDelete.bind(null, record),
+              },
+              {{~ end ~}}
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    {{~ if model.has_create || model.has_update ~}}
+    <{{model.modal_name}} @register="registerModal" @change="reload" />
+    {{~ end ~}}
+  </div>
+</template>
+
+<script lang="ts" setup>
+  {{~ if model.has_create ~}}
+  import { Button } from 'ant-design-vue';
+  {{~ end ~}}
+  import { BasicTable, TableAction, useTable } from '/@/components/Table';
+  import { getDataColumns } from '../datas/TableData';
+  import { getSearchFormProps } from '../datas/ModalData';
+  {{~ if model.has_create || model.has_update ~}}
+  import { useModal } from '/@/components/Modal';
+  {{~ end ~}}
+  {{~ if model.has_delete ~}}
+  import { useMessage } from '/@/hooks/web/useMessage';
+  {{~ end ~}}
+  import { useLocalization } from '/@/hooks/abp/useLocalization';
+  import { {{ model.get_list_action }}{{ if model.has_delete }}, {{ model.delete_action }}{{ end }}{{ if model.has_advanced_search }}, {{ model.available_fields_action }}, {{ model.advanced_search_action }}{{ end }} } from '{{model.api_path}}';
+  {{~ if model.paged_request ~}}
+  import { formatPagedRequest } from '/@/utils/http/abp/helper';
+  {{~ end ~}}
+  import {{model.modal_name}} from './{{model.modal_name}}.vue';
+
+  const { L } = useLocalization(['{{model.remote_service}}', 'AbpUi']);
+  {{~ if model.has_delete ~}}
+  const { createConfirm, createMessage } = useMessage();
+  {{~ end ~}}
+  {{~ if model.has_update ~}}
+  const [registerModal, { openModal }] = useModal();
+  {{~ end ~}}
+  const [registerTable, { {{ if model.has_delete || model.has_create || model.has_update }}reload{{ end }} }] = useTable({
+    rowKey: '{{ model.key }}',
+    title: L('{{model.application}}'),
+    api: {{ model.get_list_action }},
+    columns: getDataColumns(),
+    {{~ if model.paged_request ~}}
+    beforeFetch: formatPagedRequest,
+    {{~ end ~}}
+    pagination: true,
+    striped: false,
+    useSearchForm: true,
+    showIndexColumn: false,
+    showTableSetting: true,
+    formConfig: getSearchFormProps(),
+    {{~ if model.has_advanced_search ~}}
+    advancedSearchConfig: {
+      useAdvancedSearch: true,
+      defineFieldApi: {{ model.available_fields_action }},
+      fetchApi: {{ model.advanced_search_action }},
+    },
+    {{~ end ~}}
+    bordered: true,
+    canResize: true,
+    immediate: true,
+    {{~ if model.has_update || model.has_delete ~}}
+    actionColumn: {
+      width: 150,
+      title: L('Actions'),
+      dataIndex: 'action',
+    },
+    {{~ end ~}}
+  });
+
+  {{~ if model.has_create ~}}
+  function handleAddNew() {
+    openModal(true, {});
+  }
+  {{~ end ~}}
+
+  {{~ if model.has_update ~}}
+  function handleEdit(record) {
+    openModal(true, record);
+  }
+  {{~ end ~}}
+
+  {{~ if model.has_delete ~}}
+  function handleDelete(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: L('AreYouSure'),
+      content: L('ItemWillBeDeletedMessage'),
+      onOk: () => {
+        return {{ model.delete_action }}(record.{{ model.key }}).then(() => {
+          createMessage.success(L('SuccessfullyDeleted'));
+          reload();
+        });
+      },
+    });
+  }
+  {{~ end ~}}
+</script>