Dedsi Vue3 Coding Guidelines

When to Use

• Create new Vue 3 page components
• Implement CRUD (Create, Read, Update, Delete) functionality
• Define API service layers
• Use Dedsi UI components
• Handle form and table data
• Follow project coding standards

Capability Rules

API Service Layer

View Components

Data Handling

Efficiency Rules

Code Templates

Technology Stack

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• UI Component Library: Dedsi UI
  • Prefix:

    dedsi-

    (e.g.,

    dedsi-button

    ,

    dedsi-table

    )
• Icons:

  @ant-design/icons-vue

• Date Handling:

  dayjs

• HTTP Client: Custom

  AxiosRequest

  wrapper

Project Structure

src/
├── apiServices/          # API Service Layer
│   ├── identitys/        # Identity Authentication Service
│   │   ├── userService.ts
│   │   ├── types.ts
│   │   └── index.ts
│   └── index.ts          # Unified Export
├── components/           # Reusable Components
├── configs/             # Configuration Files
├── layouts/             # Layout Components
├── router/              # Router Configuration
├── stores/              # Pinia State Management
├── utils/               # Utility Functions
├── views/               # Page Views
└── App.vue

Development Guidelines

Core Principles

• Component-First: Prioritize using Dedsi UI components with the

  dedsi-

  prefix
• Composition API: All components use

  <script setup lang="ts">

• Type Safety: Strictly use TypeScript type definitions
• Error Handling: Uniformly use try-catch and

  DedsiMessage

API Service Layer

src/apiServices/{module}/

• Define services using

  class

• Export service instances (singleton pattern)
• DTO type definitions are in

  types.ts

• Implement standard methods:

  pagedQuery

  ,

  get

  ,

  create

  ,

  update

  ,

  delete

View Components

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
</script>

1. Search card (

   dedsi-card

   +

   dedsi-form

   )
2. Table card (

   dedsi-card

   +

   dedsi-table

   )
3. Modal form (

   dedsi-modal

   +

   dedsi-form

   )

Core State

// Table Data
const tableLoading = ref(false)
const tableData = ref<Dto[]>()

// Pagination Configuration
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// Query Parameters
const queryParam = reactive<Partial<InputDto>>({ ... })

// Modal Form
const modalVisible = ref(false)
const formState = reactive<any>({ ... })

Best Practices

1. Table Column Definitions

• Prioritize using

  slot

  to define columns for easy custom rendering
• Format date fields using

  dayjs

• Use

  template #actions

  slot for operation columns

2. Data Loading

• Uniformly encapsulate the

  fetchData

  method
• Wrap API requests with

  try-catch

• Reset

  tableLoading.value = false

  in

  finally

3. Form Handling

• Use

  Object.assign(formState, detail)

  to populate data when editing
• Reset

  formState

  when creating new entries
• Determine whether to Create or Update based on the presence of

  id

  when submitting
• Use

  formRef

  for form validation

4. Form Validation

• Define validation rules using

  :rules

• Manually call

  formRef.value?.validate()

  for validation
• Call

  formRef.value?.clearValidate()

  to clear validation when closing the modal

5. Icon Usage

• Import icons from

  @ant-design/icons-vue

• Use

  <template #icon>

  slot to add icons to buttons

6. Delete Operations

• Wrap delete buttons with

  dedsi-popconfirm

• Prevent accidental operations

7. View Details

• Provide independent detail view modals
• Use

  dedsi-typography:copyable

  for key fields to enable copying

References

• Dedsi Vue-UI - Dedsi UI Component Library Documentation
• Vue 3 Documentation - Vue 3 Official Documentation
• TypeScript Documentation - TypeScript Official Documentation