UmiJS

# Create a Project With create-umi

# Introduce create-umi

Umi provides scaffolding through create-umi, including:

  • project，general project boilerlate, support choose TypeScript and functions in umi-plugin-react
  • ant-design-pro, boilerplate only with the layout of ant-design-pro, you could add pages with umi block one by one later
  • block, boilerlate for umi block
  • plugin, boilerplate for umi plugin
  • library, boilerplalte for library, based on umi-plugin-library

# Create umi project

You can use create-umi via yarn create umi or npm create umi. Recommend to use yarn create, to make sure use the latest boilerplate everytime.

First, use yarn create umi in the new directory.

$ mkdir myapp && cd myapp
$ yarn create umi

FAQ: If encounter the problem of create-umi command not found, try to execute yarn global bin, and add the output to PATH environment variable.

Choose project.

? Select the boilerplate type (Use arrow keys)
  ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
❯ app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

Confirm if you want to use TypeScript.

? Do you want to use typescript? (y/N)

Then, select the function you need, checkout plugin/umi-plugin-react for the detailed description.

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd
 ◯ dva
 ◯ code splitting
 ◯ dll

Once determined, the directories and files will be automatically created based on your selection.

   create package.json
   create .gitignore
   create .editorconfig
   create .env
   create .eslintrc
   create .prettierignore
   create .prettierrc
   create .umirc.js
   create mock/.gitkeep
   create src/app.js
   create src/assets/yay.jpg
   create src/global.css
   create src/layouts/index.css
   create src/layouts/index.js
   create src/models/.gitkeep
   create src/pages/index.css
   create src/pages/index.js
   create webpack.config.js
✨  File Generate Done
✨  Done in 161.20s.

Then install the dependencies manually,

$ yarn

Finally, start local development server with yarn start.

$ yarn start

If it goes well, open http://localhost:8000 in the browser and you will see the following ui.

← Examples →