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