Gids voor het ontwikkelen van business componenten

Voor complexe business componenten met third-party dependencies en statische resources moeten specifieke ontwikkelstandaarden worden gevolgd om de overdraagbaarheid te garanderen.

Ontwikkelstandaarden

Resource-referenties

Alle afhankelijke resources moeten met relatieve paden worden geïmporteerd:

<script>
// ✅ Correct: relatief pad
import bgIcon from './assets/bg.png'

// ❌ Fout: padalias
import bgIcon from '@/assets/bg.png'
</script>

Dependency-declaratie

Dependencies van derden die door componenten worden gebruikt, hoeven niet te worden gebundeld en worden ook niet in comp.json aangegeven. Het systeem scant de import-statements in je bronbestanden en haalt de dependency-informatie eruit.

Omdat dependencies worden opgelost vanuit de node_modules van je lokale project en voor de preview worden geprebuild, moet elke dependency die het component gebruikt al lokaal geïnstalleerd zijn (npm install <pkg>); anders meldt de preview een ontbrekende dependency.

CSS-preprocessors

SCSS-preprocessors worden ondersteund. Gebruik:

<style lang="scss" scoped>
.component {
  &__title {
    font-size: 16px;
    
    &:hover {
      color: #409eff;
    }
  }
}
</style>

Volledig voorbeeld

Hieronder staat een voorbeeld van een business component met ECharts:

Mapstructuur

Framework-opmerking: dit voorbeeld toont een Vue component. Voor React componenten vervang je index.vue door index.jsx (of index.tsx) en gebruik je .jsx-bestanden in de map demo/.

UserGrowthChart/
├── index.vue          # Component entry
├── README.md          # Component documentation
├── comp.json          # Configuration file
└── demo/
    ├── index.vue      # Small window preview example
    └── full.vue       # Full screen preview example

index.vue

<template>
  <div class="chart-container">
    <h3 class="chart-title">{{ title }}</h3>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'UserGrowthChart',
  props: {
    title: {
      type: String,
      default: 'User Growth Trend'
    },
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.chart?.dispose()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartRef)
      this.chart.setOption({
        xAxis: { type: 'category', data: this.data.map(d => d.date) },
        yAxis: { type: 'value' },
        series: [{
          data: this.data.map(d => d.value),
          type: 'line',
          smooth: true
        }]
      })
    },
    handleResize() {
      this.chart?.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  
  .chart-title {
    margin: 0 0 12px;
    font-size: 16px;
    color: #333;
  }
  
  .chart {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>

README.md

# UserGrowthChart User Growth Chart

A line chart component displaying user growth trends, implemented based on ECharts.

## Properties

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| title | String | No | Chart title, default "User Growth Trend" |
| data | Array | Yes | Chart data, format [{ date: '2024-01', value: 100 }] |

## Usage Example

```vue
<template>
  <UserGrowthChart
    title="Monthly Active Users"
    :data="growthData"
    style="height: 400px"
  />
</template>

<script setup>
import UserGrowthChart from './UserGrowthChart/index.vue'

const growthData = [
  { date: '2024-01', value: 1200 },
  { date: '2024-02', value: 1500 },
  { date: '2024-03', value: 1800 }
]
</script>

Dependencies

• echarts: ^5.0.0

### demo/index.vue (preview in een klein venster)

```vue
<template>
  <div style="width: 320px; height: 240px;">
    <UserGrowthChart :data="data" />
  </div>
</template>

<script>
import UserGrowthChart from '../index.vue'

export default {
  components: { UserGrowthChart },
  data() {
    return {
      data: [
        { date: 'Jan', value: 120 },
        { date: 'Feb', value: 200 },
        { date: 'Mar', value: 150 }
      ]
    }
  }
}
</script>

demo/full.vue (preview op volledig scherm)

<template>
  <div style="width: 100%; height: 500px; padding: 20px;">
    <UserGrowthChart
      title="2024 User Growth Trend"
      :data="data"
    />
  </div>
</template>

<script>
import UserGrowthChart from '../index.vue'

export default {
  components: { UserGrowthChart },
  data() {
    return {
      data: [
        { date: 'Jan', value: 1200 },
        { date: 'Feb', value: 2000 },
        { date: 'Mar', value: 1500 },
        { date: 'Apr', value: 2800 },
        { date: 'May', value: 3200 },
        { date: 'Jun', value: 4000 }
      ]
    }
  }
}
</script>

FAQ

V: De component preview toont fouten na het uploaden?

A: Controleer het volgende:

1. Of de vereiste dependencies van de component lokaal zijn geïnstalleerd
2. Of resourcepaden relatieve paden gebruiken
3. Of de browserconsole specifieke foutmeldingen toont

V: Hoe kun je een component debuggen?

A: Debug volledig in de lokale ontwikkelomgeving voordat je uploadt. Klik na het uploaden op "Vernieuwen" op de previewpagina om de nieuwste resultaten te zien.

V: Worden componentstijlen vervuild door globale stijlen?

A: Gebruik altijd het attribuut scoped om stijlen te isoleren. Als je stijlen van het UI-framework wilt overschrijven, gebruik dan de selector :deep().