What's dumi?

dumi, pronounced like [duːmɪ], is a documentation tool for developing libraries. It can provide one-stop component development experience for developer with father, in which father for building and dumi for component development & writting docs.

Features

  • 📦 Out of the box, focus on component development and documentation
  • 📋 Rich Markdown extensions, more than just rendering component demo
  • 🏷 Automatically generate component API based on TypeScript type definition
  • 🎨 Easily customize the theme, and create your own Markdown components
  • 📱 Support mobile component library development, built-in mobile HD rendering solution
  • 📡 One-line command digitizes component assets and connects them with downstream productivity tools

Getting Started

Environment setup

First, you should have node, and ensure that the node version is 10.13 or above.

$ node -v
v10.13.0

Initial scaffold

For convenience of usage, dumi provides two different scaffolds, differences between the two scaffolds can view Guide - Mode. First, we need to find a place to make an empty directory, and then use scaffold:

$ mkdir myapp && cd myapp

Scaffold for components

Scaffold for components includes not only dumi and basic docs, but also a simple component, umi-test, father-build. which can implement processes of developing components, writting docs, coding test cases, build components.

$ npx @umijs/create-dumi-lib # initial a scaffold for components in doc mode
# or
$ yarn create @umijs/dumi-lib
$ npx @umijs/create-dumi-lib --site # initial a scaffold for components in site mode
# or
$ yarn create @umijs/dumi-lib --site

Scaffold for static site

Scaffold for static site is a scaffold in multi-language site mode, which only includes docs.

$ npx @umijs/create-dumi-app
# or
$ yarn create @umijs/dumi-app

Repository template initialization

We can also use the dumi-template repository for initialization, visit https://github.com/umijs/dumi-template to learn more.

Start development

$ npm i
$ npm start
# or
$ yarn
$ yarn start

or execute npx dumi dev to start debugging components or writing documents:

Build and deploy

Execute npm run docs:build (scaffold for components) / npm run build(scaffold for static site), or npx dumi build to build our documentation site. The build product will be output to the dist directory by default. We can deploy the dist directory to now.sh, GitHub Pages, etc. On a static site hosting platform or a certain server.