# 组件示例

```bash
1、axios实例问题：一般vue3前端项目都对axios实例进行封装，需找到项目中axios封装文件。
```

```bash
2、API前缀问题：API前缀是需要与后端项目统一的接口前缀。
```

## 项目1示例 

```vue
<template>
  <basic-container >
    <NorthModule :request="request" :prefix="prefix" :xmlJs="xmlJs" />
  </basic-container>
</template>

<script setup>
// 引入项目axios实例
import request from '@/axios';
// 引入 API前缀
const prefix = ref('/api/bnc');

// 默认引入
import xmlJs from 'x2js';
</script>
```

```bash
 1.axios实例参考图
```
<img style='width: 400px;text-align: center;' src="./img/screenshot2.jpg"/>

```bash
 2.API前缀实例参考图
```
<img style='width: 400px;text-align: center;' src="./img/screenshot1.jpg"/>


## 项目2示例 

```vue
<template>
  <basic-container >
    <NorthModule :request="request" :prefix="prefix" :xmlJs="xmlJs" />
  </basic-container>
</template>

<script setup>
// 引入项目axios实例
import request from '@/utils/request'
// 引入 API前缀
const prefix = ref('/api/ecsro');

// 默认引入
import xmlJs from 'x2js';
</script>
```

```bash
 1.axios实例参考图
```
<img style='width: 400px;text-align: center;' src="./img/screenshot4.jpg"/>

```bash
 2.API前缀实例参考图
```
<img style='width: 400px;text-align: center;' src="./img/screenshot3.jpg"/>