环境准备
现在是大前端时代,开发项目得有node,并确保 node 版本是 10.13 或以上。(Mac建议用nvm阿里管理node)。
推荐使用yarn来管理依赖,建议使用国内阿里源,切换源。推荐使用 nrm来管理源
yarn config set registry https://registry.npm.taobao.org
脚手架
我们在一个空的地方创建一个目录
mkdir app && cd app
通过命令创建项目
yarn create @umijs/umi-app
或 npx @umijs/create-umi-app
我们会看到umi会自动帮我们创建文件
success Installed "@umijs/create-umi-app@3.3.4" with binaries:
- create-umi-app
Copy: .editorconfig
Write: .gitignore
Copy: .prettierignore
Copy: .prettierrc
Write: .umirc.ts
Copy: mock/.gitkeep
Write: package.json
Copy: README.md
Copy: src/pages/index.less
Copy: src/pages/index.tsx
Copy: tsconfig.json
Copy: typings.d.ts
✨ Done in 44.06s.
安装依赖
yarn
我们会看到安装过程
success Saved lockfile.
$ umi generate tmp
✨ Done in 163.60s.
启动项目
yarn start
在浏览器里打开 http://localhost:8000/,能看到以下界面,
目录结构
umi初始化项目的目录结构大致是
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
├── .umi
├── layouts/index.tsx
├── pages
├── index.less
└── index.tsx
└── app.ts
package.json
主要包含包的依赖
.umirc.ts
package.json配置文件,包含 umi 内置功能和插件的配置。
dist 目录
执行 umi build 后,产物默认会存放在这里。
mock 目录
存储 mock 文件,此目录下所有 js 和 ts 文件会被解析为 mock 文件。
public 目录
此目录下所有文件会被 copy 到输出路径。
src 目录
项目源代码
.umi
临时文件目录,比如入口文件、路由等,都会被临时生成到这里。不要提交 .umi 目录到 git 仓库,他们会在 umi dev 和 umi build 时被删除并重新生成。layouts/index.tsx
约定式路由时的全局布局文件。pages 目录
所有的页面组件都会放到这里app.ts
运行时配置文件,可以在这里扩展运行时的能力,比如修改路由、修改 render 方法等。
构建发布
yarn build
构建产物默认生成到 ./dist 下,然后通过 tree 命令查看,
./dist
├── index.html
├── umi.css
└── umi.js
结束语
到这里我们就完成了umi项目的搭建。接下来我们一起学习React JSX
。