sirius-dumi-ui v0.0.4

说明文档

启动项目

执行 yarn install 执行 yarn start 启动

yarn
yarn start

脚手架初始化

新建一个空文件夹，然后使用脚手架初始化项目。

mkdir myapp && cd myapp
npx @umijs/create-dumi-lib
# or
yarn create @umijs/dumi-lib

默认文档目录

dumi 会默认使用 src 和 docs 目录下的 md 文件生成对应的文档。

运行查看效果

$ npm start

访问开发服务 http://localhost:8000。

打包编译

npm run build

编译使用的是 father-build，用于组件库打包,有一个特别需要注意的地方，如果组件中使用到第三方的库，那么需要这些库在 package.json 中的 dependencies 或者 preDependencies 中，一般的打包出错问题，几乎都是这个原因引起的。注意 dependencies 或者 preDependencies 中的包是我们需要的依赖，注意将组件库不需要的依赖，移到 devDependencies 中，如脚手架创建的项目，最终修改为

"dependencies": {
    "react": "^16.12.0"
  },
  "devDependencies": {
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.0.5",
    "dumi": "^1.0.5",
    "father-build": "^1.17.2",
    "lint-staged": "^10.0.7",
    "prettier": "^1.19.1",
    "yorkie": "^2.0.0"
  }

发布组件库

确定组件库名称，并确定名称未被其他人使用。如这里修改为 sirius-dumi-ui。然后执行 npm publish 将组件库发布到 npm 上。

使用组件库

yarn add sirius-dumi-ui

在页面中使用

import React from 'react';
import { Button } from 'sirius-dumi-ui';

export default () => <Button type="secondary">secondary</Button>;

构建及部署

执行 npm run docs:build (组件开发脚手架) / npm run build（静态站点脚手架）, 或 npx dumi build 即可对我们的文档站点做构建，构建产物默认会输出到 dist 目录下，我们可以将 dist 目录部署在 Vercel、GitHub Pages 等静态站点托管平台或者某台服务器上。