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.

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 },
        { date: 'Jun', value: 4000 }
      ]
    }
  }
}
</script>

FAQ

Q: Component preview shows errors after uploading?

A: Check the following:

1. Whether the component's required dependencies are installed locally
2. Whether resource paths use relative paths
3. Whether the browser console shows specific error messages

Q: How to debug a component?

A: Complete debugging in the local development environment before uploading. After uploading, click "Refresh" on the preview page to see the latest effects.

Q: Component styles are polluted by global styles?

A: Always use the scoped attribute to isolate styles. If you need to override UI framework styles, use the :deep() selector.