Environment setup

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

$ node -v

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

Initial in manual way


Create an empty directory, and then execute following command in the directory to install:

$ npm i dumi -D

Start to write docs

Dumi will search markdown files which are in the docs, src (or src of each lerna package) directory automatically, we could create a simplest doc first:

$ mkdir src && echo '# Hello dumi!' > src/index.md

And then execute npx dumi dev, the doc will appear in front of you:

Try to write a demo

Dumi will consider jsx/tsx code block as React Component to render, then take it into demo wrapper, We could modify to following content in src/index.md:

# Hello dumi!
import React from 'react';
export default () => <h2>First Demo</h2>;

Our first demo is running after saving:

Is it simple? However, is's easy to write a demo but difficult to write a good demo. Dumi has some ideals and principles that want to share with you about how to write a demo: Ideals of demos.