Arco 物料项目

物料平台文档中心

快速开始

# 开发
npm run dev

# 构建
npm run build

# 发布前预览
npm run prepublishOnly && arco preview

# 发布至物料平台（需先发布 NPM 包）
arco sync

提供 Demo

Demo 目录位于 src/demo。你可以在此目录中加入多个 Demo，它们将被展示在物料平台的预览页。在 src/demo/index.js 中，通过 JSDoc 的语法提供物料及各个 Demo 的相关信息。

1// src/demo/index.js
2
3/**
4 * @file
5 * @title 组件名
6 * @memberOf 组件类型，例如：数据输入
7 * @description 描述你的组件。
8 */
9
10/**
11 * @title 基本用法
12 * @description 描述你的例子
13 */
14import Basic from './basic.vue';
15
16export const BasicDemo = () => Basic;

API 文档

为了帮助他人更好地使用你的组件，请提供详细的 API 文档。

书写注释

我们使用了 Vue Styleguidist 来提取组件 Props 的注释，然后自动生成组件的 API 文档。为此，如果你想对外暴露一个 Property，请参照Vue Styleguidist 的规则书写注释：

1// ✅ 可以被正确提取的注释
2props: {
3  /**
4   * 提示文字
5   */
6  tip: String,
7  /**
8   * 按钮组件Props
9   */
10  buttonProps: {
11    // 如果使用PropType，请使用对象的形式定义
12    type: Object as PropType<Record<string, any>>,
13  },
14},
15
16// ❌ 没有书写注释的属性会被忽略
17props: {
18  disabled: Boolean,
19},

扩展 TEMPLATE.md

TEMPLATE.md 是用于自动文档生成的模板，你可以修改此文件添加更多组件的使用帮助信息，但请不要删除其原有的内容，否则可能导致内容替换失败。

1// TEMPLATE.md
2---
3file: index
4---
5
6# TooltipButton
7
8## 属性/Props
9
10%%Props%%
11
12### OtherProps
13
14在这里你可以书写更多组件帮助文档。
15
16## Demos
17
18%%Demos%%

测试

测试目录位于 src/__test__。你可以在 index.test.tsx 中编写你的测试用例，在 demo.test.tsx 中可以进行基于 Demo 的快照测试。