# 部件开发脚手架

**Repository Path**: zhangpu_666/low-code-part

## Basic Information

- **Project Name**: 部件开发脚手架
- **Description**: 麦冬数字科技低代码开发平台部件开发脚手架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-30
- **Last Updated**: 2025-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README





# 部件脚手架

## 1、运行

开发运行命令

```
npm run dev
```

## 2、打包

开发打包命令

```
npm run build
```

## 3、开发目录

用户的所有操作都需要在/src/part下操作

基本目录结构

```
├── attr.vue
├── dataInfo.json
├── index.vue
├── preview.png
├── publicFun.json
└── static\
```

其中：

1、index.vue 是我们部件的主题，打包后项目运行起来也是以它为主的

2、attr.vue 是我们自定义属性面板

3、dataInfo.json 是我们的部件信息

4、publicFun.json 是我们定义的公共函数

5、preview.png 是我们预览的图片，也就是拖拽时供用户识别的功能

下面我们会对每个模块进行讲解。

## 4、index.vue

我们开发的部件的所有内容都在这里。

### 入参

值得注意的是我们需要父级传过来5个参数供我们控制部件的动态变化。数据如下：

```javascript
const props = defineProps({
    options: { // 配置项
        type: Object,
        default: () => ({})
    },
    apiData: {// 接口数据  自己接口的数据
        type: Object,
        default: () => ({})
    },
    busStore: {// 公用数据 一对多组件通信数据
        type: Object,
        default: () => ({})
    },
    privateStore: {// 私有数据 一对一组件通信数据
        type: Object,
        default: () => ({})
    },
    ownStore: {// 系统分配给当前组件的数据  每个系统提供的接口最好都传一下这个参数
        type: Object,
        default: () => ({})
    }
})
```

#### options

options是我们拿到的attr.vue内配置的属性，当attr.vue的属性被赋值以后，数据就会在这里出现。

#### apiData

apiData 是获取当前组件接口返回来的数据。

注意：接口不被调用则不会触发该事件。默认进入是不被调用的。

返回的数据格式：

```
{
      id: "当前组件的唯一标识",
      url: opts.url,
      result: result,
 };
```

| 字段名 | 说明                                                         |
| ------ | ------------------------------------------------------------ |
| id     | 无意义，一般用不着，代表该组件的唯一标识                     |
| url    | 接口唯一标识，也就是接口地址。这个必须强调一下，该参数是唯一的，不可以出现两个接口是同一个地址的情况，否则会合并成一个，并且以最后一个为准 |
| result | 接口返回来的结果                                             |

#### busStore

busStore是全局通信过来的参数，部件自己设置的busStore参数会被提升到全局被每个部件拿到。不同部件设置了相同的通信参数的话，会被合并，并且以最后触发的数据为准。对于部分实时监听变化的，可能会出现闪屏，所以最好由上层框架定义该参数。触发该参数是由全局函数$broadcast来触发。

数据结构：无固定数据结构，任何部件都可以通过触发$broadcast的方式添加key值，修改值。

#### privateStore

privateStore 是该部件的私有参数，不会与其他部件进行共享，当某个部件指定触发该部件时，参数就会被传入。该位置配置的key值会被一一映射，没有的会以原来的值进行修改，该位置配置的value值无意义，可以作为说明。

#### ownStore

ownStore 是该部件的所有信息，在我们使用方法的时候需要把该参数传过去，用于识别数据是从哪里来的。不可修改。

### 事件

index.vue内置了13个公共函数。但是都是挂载到了全局，所以在使用的时候需要通过getMDInstance()调取。

这些接口有些是外部插件，比如：

#### [$lodash](https://www.lodashjs.com/)

lodash一个高性能的 JavaScript 实用工具库.

版本：4.17.21

使用方式

```html
<script setup>
const { $_ } = getMDInstance();
const shuffledArr = $_.shuffle(arr);  // 使用 lodash 的 shuffle 函数
console.log(shuffledArr);
</script>
```

#### [$echarts](https://echarts.apache.org/examples/zh/index.html)

echarts一个功能强大的图表库，支持多种类型的图表（如折线图、柱状图、饼图、散点图等）.

版本：6.0.0

使用方式

```html
<script setup>
const { $echarts } = getMDInstance();
console.log($echarts);
</script>
```

#### [$d3](https://d3.nodejs.cn/)

d3一个非常强大的数据可视化库，可以进行高度定制的可视化。

版本：7.9.0

使用方式

```html
<script setup>
const { $d3 } = getMDInstance();
console.log($d3);
</script>
```

#### [$dayjs](https://dayjs.fenxianglu.cn/category/)

日期处理插件。

版本：1.11.13

使用方式

```html
<script setup>
const { $dayjs } = getMDInstance();
console.log($dayjs);
</script>
```

#### [$Hls](https://github.com/video-dev/hls.js)

专门用于播放 HLS（HTTP Live Streaming）流，但可以通过其实现支持低延迟的实时视频流播放。

版本：1.6.10

使用方式

```html
<script setup>
const { $Hls } = getMDInstance();
console.log($Hls);
</script>
```

#### [$videojs](https://videojs.com/)

支持 HLS、DASH、RTMP、RTSP、MPEG-DASH 等多种流协议。

版本：8.23.4

使用方式

```html
<script setup>
const { $videojs } = getMDInstance();
console.log($videojs);
</script>
```

#### [$ol](https://openlayers.org/)

openlayers是一个开源的 JavaScript 地图库，适用于展示各种地图类型，支持与多种地图数据源（如 OpenStreetMap、Google Maps 等）集成。

版本：10.6.1

使用方式

```html
<script setup>
const { $ol } = getMDInstance();
const{ Map,OSM,View } =  $ol;
console.log(Map,OSM,View);
</script>
```

#### [$ThreeJs](http://www.webgl3d.cn/pages/aac9ab/)

**Three.js** 是一个基于 **WebGL** 封装的 JavaScript 3D 渲染库。它能让前端开发者更轻松地在浏览器中创建和展示 **3D 图形、动画、交互效果**。

版本：0.179.1

```vue
<script setup>
const { $ThreeJs } = getMDInstance();
console.log($ThreeJs);
</script>
```

#### [$anime](https://animejs.com/documentation/)

anime.js 是一个轻量级且功能强大的 JavaScript 动画库，可用于创建流畅的 CSS 动画、DOM 元素动画、SVG 动画等。

版本：4.1.3

```vue
<script setup>
const { $anime } = getMDInstance();
console.log( $anime);
</script>
```



有些是内部函数，比如:

#### $runApi

传统的 `XMLHttpRequest`,但是引入了axios插件，不过不用关心其是否引用，在组件中有独特的调用方式。

每次触发它的时候apiData都会监听到变动。apiData的使用可以查看入参apiData。

```
$runApi({
    url:'接口地址',
    data:'请求参数',
    ownStore: props.ownStore,// 必填
});
```

使用方式

```html
<script setup>
const { $runApi, $runFetch, $runPublicFun } = getMDInstance();
$runApi({ url: props.options.url, data: { id: 12345 }, ownStore: props.ownStore });
</script>
```

#### $runFetch

一种现代版的送网络请求发送方式。

每次触发它的时候apiData也都会监听到变动。apiData的使用同样可以查看入参apiData。

```
$runFetch({
    url:'接口地址',
    data:{},// 是fetch的全部参数
    ownStore: props.ownStore,// 必填
});
```

使用方式

```html
<script setup>
const { $runApi, $runFetch, $runPublicFun } = getMDInstance();
$runFetch({ url: props.options.url, data: {  }, ownStore: props.ownStore });
</script>
```

注意：data是全参数，如果字段覆盖了请求头，那就会修改请求头。

如果你只想传递data，那么你应该把数据放到body里。

那么此时接口调用就成了下面的样子：

```
$runFetch({ url: props.options.url, data: { body：body }, ownStore: props.ownStore });
```

关于fetch可以去[cdn](https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch)查看。

#### $runPublicFun

该事件是触发局部通信的，其所执行的函数必须是publicFun.json定义的。

每次触发它的时候，目标组件的privateStore会发生变动。

```
$runPublicFun({ key: '事件key值', ownStore: props.ownStore })
```

使用方式

```html
<script setup>
const { $runApi, $runFetch, $runPublicFun } = getMDInstance();
$runPublicFun({ key: 'runFetch', ownStore: props.ownStore })
</script>
```

在配置界面有个全局通讯属性，在那里可以看到该部件定义的参数，而事件的触发直接指向目标组件。

#### $broadcast

全局广播。

每次触发它的时候，busStore都会发生变动。

使用方式

```html
<script setup>
const { $broadcast } = getMDInstance();
$broadcast(data)
</script>
```

广播会通知所有组件的busStore发生变化，切记不可以造成死循环。即监听到广播后又发出广播，这种做法是不对的。如果即监听又触发的话，可以选择不同的字段。

## 5、attr.vue

这个文件是我们开发的部件属性。需要注意的是宽度需要自适应，否则属性会出现错位。

该组件内最好不要使用接口，因为在真实环境中该部件会被拿掉，其所生产的数据会永久保留在目标部件中。

基本代码

```javascript
<script setup>
import { ref, defineExpose,watch, defineProps } from 'vue'
const props = defineProps({
    options: {// 配置属性
        type: Object,
        default: () => ({})
    }
})
const options = ref(props.options)
watch(() => props.options, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        options.value = props.options
    }
})


defineExpose({
    options: options
})
</script>
```

### 入参

#### options

options是默认属性，但是需要实时监听，因为在真实应用场景下，options是会在不同组件中进行切换的。

### 出参

#### options

通过使用defineExpose将属性值抛出，这样才能让组件真实接收到该属性的实时变化。

名称不能变。使用默认代码就可以。

defineExpose({
    options: options
})

## 6、dataInfo.json 

布局配置

```
{
  "name": "chaiquan555",// 组件名 （唯一）
  "version": "0.0.0",// 版本
  "chineseName": "柴犬555",// 中文名称
  "category": 0,// 组件适用类型  0代表通用。1代表仅适用于大屏。2代表适用于普通网页。后续会增加更多专业版本，请及时查看文档。
  "describe": "描述",// 描述
  "author": "zhangbaoqi",// 作者
  "width": "200",// 拖入格的宽度（不建议修改）
  "height": "200",// 拖入格的高度（不建议修改
  "options": {// 自定义属性数据
    "url": "1",
    "width": "100%",
    "height": "100%"
  },
  "apiData": [],// 数据内容
  "busStore": {},// 公用数据，不建议配置内容。若配置后会自动提升到全局。
  "privateStore": {// 默认私有数据
    "data": {},
    "methods": {},
    "computed": {}
  },
  "apiList": [// 默认接口
    {
      "url": "1",
      "method": "GET",
      "type": "2",
      "apiType": "1",
      "staticData": "{\"data\": {\"name\": \"zhangbaoqi\"}}"
    }
  ],
  "ownStore": {}
}
```

值得注意的是，默认接口的静态数据必须转译。

## 7、publicFun.json

公开接口

下面是示例：

```
{
  "runFetch": {
    "url": "http://localhost:3000/api/getData",
    "method": "GET",
    "data": ""
  },
  "runPost": {
    "url": "http://localhost:3000/api/postData",
    "method": "POST",
    "data": ""
  }
}
```

上面定义了两个公共接口，一个是runFetch，一个是runPost，他们所发送的字段都是url、method、data。url、method、data的值无意义。

## 8、preview.png

预设标识图片。

## 9、UI组件库

组件库的使用需要**按需引入**，全局引入不会被打包进去。这里推荐使用原生html，因为原生的能够缩小组件大小，组件大小是受平台限制的。

以下是支持的组件库。

#### [element-plus](https://element-plus.org/zh-CN/component/overview.html)

一个基于 Vue 3 的开源 UI 组件库

版本：2.10.6

#### [vant](https://vant-ui.github.io/vant/#/zh-CN/home)

针对移动端开发，有一些非常优秀的 UI 库

版本：4.9.21

## 10、static文件夹

无意义。

如果有需要单独引入的资源，可以放在这里，但是如果在index.vue和attr.vue中没有被引用的话。依然不会被打包进去。

静态资源建议放在第三方服务器上，通过发送请求的方式获取资源。

根据上传要求，最后上传的组件不得大于200KB。

## 11、注意事项

1、组件名命名最好不要使用特殊字符，下划线中划线会自动转成驼峰形式。

2、自己的组件库不可以重复出现两个相同命名的组件。

3、如果node安装有些包下载不下来的话，这里提供了一个直接下载的包。
链接: https://pan.baidu.com/s/1eP2iFVYyPgugsKPjK7aVzA?pwd=eigc 提取码: eigc