Business Component Development Guide

For complex business components that include third-party dependencies and static resources, specific development standards need to be followed to ensure portability.

Development Standards

Resource References

All dependent resources must be imported using relative paths:

<script>
// ✅ Correct: relative path
import bgIcon from './assets/bg.png'

// ❌ Wrong: path alias
import bgIcon from '@/assets/bg.png'
</script>

Dependency Declaration

Third-party dependencies used by components do not need to be packaged. The system will automatically identify import statements in the component and extract dependency information.

UI Framework Support

The platform currently supports the following UI frameworks:

Framework	Vue Version	Import Method
Element UI	Vue 2	Auto global import
Element Plus	Vue 3	Auto global import

No manual import is required when using; they can be used directly in templates:

<template>
  <el-button type="primary">Click</el-button>
  <el-input v-model="value" />
</template>

CSS Preprocessors

SCSS preprocessors are supported. Usage:

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

Complete Example

Below is an example of a business component using ECharts:

Directory Structure

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 (Small Window Preview)

```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 (Full Screen Preview)

<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 }
      ]
    }
  }
}
</script>