下载与使用

这一页说明把组件取到本地项目后，如何正确引用和运行。

下载组件的两个入口

从组件市场

1. 在列表里找到目标组件。
2. 点击卡片上的「下载」。
3. 在文件选择器里定位到项目的组件目录（例如 src/components）。
4. 点击「选择文件夹」确认。

从预览页

1. 打开组件详情页。
2. 点击右下角的「下载」。
3. 选择保存位置。

下载完成后，组件会以文件夹形式出现在你选择的目录里。

下载后的目录结构

MyComponent/
├── index.vue          # 入口文件（框架不同，扩展名不同）
├── README.md          # 使用说明
├── comp.json          # 平台生成的组件元信息
├── demo/              # 预览示例（如果作者提供）
│   ├── index.vue
│   └── full.vue
└── assets/            # 组件自带资源（如果有）

comp.json 只包含 __id__、name、version 三个字段，用于标识组件身份。不要把依赖写进去，依赖由源码 import 决定。

在项目里引用

Vue 3

<template>
  <MyComponent title="示例" :data="rows" />
</template>

<script setup>
import MyComponent from "@/components/MyComponent/index.vue";
</script>

Vue 2

import MyComponent from "@/components/MyComponent/index.vue";

export default {
  components: { MyComponent }
};

React

import MyComponent from "@/components/MyComponent/index.jsx";

export default function Demo() {
  return <MyComponent title="示例" />;
}

组件入口必须有 default export。只有具名导出时，预览和引用都会报错。

安装依赖

组件用到的第三方包不会随组件打包，需要在你的项目里安装：

npm install echarts

版本不必与作者完全一致，平台预览时会做依赖匹配；下载到本地后，运行使用的是你项目的版本。组件依赖清单可以在 README 或预览页的依赖区查看。

常见问题

组件渲染不出来

按顺序检查：框架是否匹配（Vue 2 / Vue 3 / React）、依赖是否安装、控制台第一条报错是什么。多数情况是缺依赖或版本跨了大版本。

样式和项目冲突

组件应使用 scoped 样式。若确实需要覆盖内部样式，使用 :deep()，不要写全局选择器。

下载后找不到 comp.json

说明下载的是旧版本产物或手动拷贝时漏了文件。重新下载即可；comp.json 缺失会影响后续更新时识别组件身份。

想改组件再发布

请看更新与版本。

下一步

• 想自己写一个组件：组件规范
• 想把改好的版本发回平台：上传与发布