Umi.js 新手入门教程
作者: 分类:前端开发浏览(603)2022-3-3

环境准备

首先得有 node,并确保 node 版本是 10.13 或以上。(mac 下推荐使用 nvm 来管理 node 版本)

node -v
v10.13.0

推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。

# 国内源
npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
tyarn -v

脚手架

先找个地方建个空目录。

mkdir myapp && cd myapp

通过官方工具创建项目,

yarn create @/umi-app
# 或 npx @umijs/create-umi-app

安装依赖

yarn

启动项目

在浏览器里打开 http://localhost:8000/,能看到以下界面,

修改配置

编辑根目录 .umirc.ts 

不用重启 yarn start,webpack 会在背后增量编译,过一会就可以看到以下界面

部署发布

构建/打包

yarn build

构建产物默认生成到 ./dist 下,打包的静态文件也需要再web服务下才能看到效果。

本地验证

发布之前,可以通过 serve 做本地验证。

yarn global add serve
serve ./dist

访问 http://localhost:5000,正常情况下应该是和执行 yarn start 时是一致的。

图片压缩在线工具 tools online