create umi创建项目

1、环境准备

安装node。node确保它是 8.10 或更高版本

$ node -v 
v14.17.0

安装yarn。推荐用于yarn管理 npm 依赖。

$ npm install -g yarn

> yarn@1.22.10 preinstall /usr/local/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.10
added 1 package in 1.671s

查看yarn版本号

$ yarn -v
1.22.10

2、创建一个空目录存放项目

$ react mkdir 目录名称 && cd 目录名称

3、创建项目。

可以通过yarn create umi 或者 使用npm create umi。推荐使用yarn create，可以确定报每次都是用最新的样板。

在新建的空目录下执行创建命令

$ yarn create umi
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
warning create-umi > sylvanas > @umijs/fabric > stylelint-config-rational-order > stylelint > postcss-markdown > remark > unified > @types/vfile > @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-umi@0.26.0" with binaries:
      - create-umi

注意：如果遇到create-umi command not found 的问题，尝试执行yarn global bin，并将输出添加到PATH环境变量中。具体操作可以参考：https://www.hxstrive.com/article/779.htm

选择模板类型

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

选择模板版本

$ Be the first to experience the new umi@3 ? (Use arrow keys)
  Pro V5 
❯ Pro V4 

选择使用的语言

$ Which language do you want to use? (Use arrow keys)
❯ TypeScript 
  JavaScript 

选择脚手架

$ Do you need all the blocks or a simple scaffold? (Use arrow keys)
❯ simple 
  complete

选择antd的版本。最新的是antd4.

$ Time to use better, faster and latest antd@4! (Use arrow keys)
❯ antd@4 
  antd@3 

选择完成后自动下载完成后如下。

4、运行项目

执行yarn下载包。

$ yarn  或者  npm install

启动项目

$ yarn start  或者  npm start

复制地址在浏览器打开。

页面展示。

5、目录和文件

├── dist/                           // default build output directory
├── mock/                           // The directory where the mock file is  约定mock目录下的所有.js文件都会解析成mock文件。mock的请求地址与mock的里的文件名无关，只和文件内部的定义有关。可以任意命名，为了更好地维护，建议起语义化的名称。located, based on express
├── public
├── node_modules                    // 脚手架默认生成项目时无此文件，执行安装后会生成
├── config/
    ├── config.js                   // umi configuration, same as .umirc.js, choose one
└── src/                            // source directory, optional 约定项目的源码都放在src目录下，运行项目时，src目录下的代码会被转换成浏览器能够正常运行正确的JavaScript版本，所以我们可以在这里使用TypeScript和JavaScript新语法。
    ├──layouts/index.js             // global layout
    ├── pages/                      // page directory, the file inside is the route 约定pages下的jsx、tsx文件即为路由，在umi中可以使用约定式路由和配置式路由，还有基础路由和动态路由。
        ├── .umi/                   // dev temp directory, need to be added to .gitignore 运行时产生的临时文件。请不要再这里修改代码，重启代码或者pages下文件改变都会重新重新生成这个文件夹下的文件。
        ├── .umi-production/        // build temporary directory, will be deleted automatically
        ├── document.ejs            // HTML template
        ├── 404.js                  // 404 page
        ├── page1.js                // page 1, arbitrarily named, export react component
        ├── page1.test.js           // Use case file, umi test will match all files ending in .test.js and .e2e.js
        └── page2.js                // page 2, arbitrarily named
    ├── global.css                  // Conventional global style files, imported automatically, or global.less
    ├── global.js                   // can add polyfill here
├── .umirc.js                       // umi configuration, same as config/config.js, choose one
├── .env                            // environment variable
└── package.json

 

5.1、mock文件使用

mock目录下新建test.js文件

文件内容：

export default {
    "/api/test": ["a", "b"]
}

访问mock目录的test.js，浏览器输入地址：

http://localhost:8001/api/test

页面展示：

6、其他

 如果遇到create-umi command not found 的问题，尝试执行yarn global bin，并将输出添加到PATH环境变量中。

$ yarn global bin