Create a project using a detailed tutorial umi scaffolding

First, the global installed umi two ways yarn install npm install and requires global installation

Ensure that the node version is 8.10 or above

yarn global add umi

或
npm i umi -g

umi -v

If umi -v can not display the version number, check whether or yarn global npm install, configure whether the environment variables

 umi scaffold to provide the ability to create-umi created by the project, there are two forms, one is the command line is to use GUI

First introduced the command line to create project

Execute the following command to start creating projects

npm creat umi

You can select the following items 

• Project , general project scaffolding to support the selection TypeScript, and whether to enable  umi-plugin-react  function included
• ant-design-pro , comprising only  ant-design-pro  scaffolding layout, specific pages by  umi block  adding
• Block , block scaffolding
• plugin , plugin scaffolding
• Library , dependent (assembly) scaffold library based  umi-plugin-library

After selecting the item in the choice of whether to use TypeScript, familiar ts can be selected when the initial recommendations after the election whether to select Enter, the scaffolding will automatically create a good project, and download dependencies

The implementation of the project to open the default port 8000

npm run start

 

Using the GUI to create a project

Enter file in any directory

umi ui

Wait a few minutes will automatically open a page

 

 

Click to create a project ->   select the directory and create a new project name -> Click Finish 

 

 

Scaffolding will automatically install, update, initialize the project, installation dependent. The final project to create success

 

这里可以看到项目的配置, 以及一些任务,可以直接在页面开启项目, 也可以直接将一些Ant Design 的资源添加到项目中

 

在创建项目时, 有很多选项, 是否使用dva, antd, 国际化, ts, 热加载,mock, dll, 如果一开始不确定使用建议选择最简单的方式创建项目.  后续需要再集成.

添加一个页面 使用

umi g page newpage

会自动生成相应的js, css