快速上手
环境准备
首先得有 node,并确保 node 版本是 18 或以上。(推荐用 nvm 来管理 node 版本,windows 下推荐用 nvm-windows)
mac 或 linux 下安装 nvm。
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash$ nvm -v0.39.1
安装 node。
$ nvm install 18$ nvm use 18$ node -vv18.10.0
然后需要包管理工具。node 默认包含 npm,但也可以选择其他方案,
安装 pnpm。
curl -fsSL https://get.pnpm.io/install.sh | sh -$ pnpm -v7.3.0
创建项目
通过官方工具创建项目,
PNPM
$ pnpm dlx create-umi@latest✔ Install the following package: create-umi? (Y/n) · true✔ Pick Npm Client › pnpm✔ Pick Npm Registry › taobaoWrite: .gitignoreWrite: .npmrcWrite: .umirc.tsCopy: layouts/index.tsxWrite: package.jsonCopy: pages/index.tsxCopy: pages/users.tsxCopy: pages/users/foo.tsx> @ postinstall /private/tmp/sorrycc-vylwuW> umi setupinfo - generate files
BUN
$ bunx create-umi✔ Pick Umi App Template › Simple App✔ Pick Npm Client › pnpm✔ Pick Npm Registry › npmWrite: .gitignoreWrite: .npmrcWrite: .umirc.tsWrite: package.jsonCopy: src/assets/yay.jpgCopy: src/layouts/index.lessWrite: src/layouts/index.tsxCopy: src/pages/docs.tsxCopy: src/pages/index.tsxWrite: tsconfig.jsonCopy: typings.d.tsready - Git initialized successfully
NPM
$ npx create-umi@latestNeed to install the following packages:create-umi@latestOk to proceed? (y) y✔ Pick Umi App Template › Simple App✔ Pick Npm Client › npm✔ Pick Npm Registry › taobaoWrite: .gitignoreWrite: .npmrcWrite: .umirc.tsWrite: package.jsonCopy: src/assets/yay.jpgCopy: src/layouts/index.lessWrite: src/layouts/index.tsxCopy: src/pages/docs.tsxCopy: src/pages/index.tsxWrite: tsconfig.jsonCopy: typings.d.ts> postinstall> umi setup
YARN
$ yarn create umisuccess Installed "create-umi@4.0.6" with binaries:- create-umi✔ Pick Umi App Template › Simple App✔ Pick Npm Client › yarn✔ Pick Npm Registry › taobaoWrite: .gitignoreWrite: .npmrcWrite: .umirc.tsWrite: package.jsonCopy: src/assets/yay.jpgCopy: src/layouts/index.lessWrite: src/layouts/index.tsxCopy: src/pages/docs.tsxCopy: src/pages/index.tsxWrite: tsconfig.jsonCopy: typings.d.tsyarn install v1.22.18success Saved lockfile.$ umi setupinfo - generate files
注:使用 bun 初始化项目会更快,需要 bun >= 0.4.0
版本。
国内建议选 pnpm + taobao 源,速度提升明显。这一步会自动安装依赖,同时安装成功后会自动执行 umi setup
做一些文件预处理等工作。
从模板创建项目
# 从 @umijs/electron-template 创建一个 electron 模板pnpm create umi --template electron
参数选项
使用 create-umi
创建项目时,可用的参数如下:
option | description |
---|---|
--no-git | 创建项目,但不初始化 Git |
--no-install | 创建项目,但不自动安装依赖 |
启动项目
执行 pnpm dev
命令,
$ pnpm dev╔═════════════════════════════════════════════════════╗║ App listening at: ║║ > Local: https://127.0.0.1:8000 ║ready - ║ > Network: https://192.168.1.1:8000 ║║ ║║ Now you can open browser with the above addresses👆 ║╚═════════════════════════════════════════════════════╝event - compiled successfully in 1121 ms (388 modules)event - MFSU compiled successfully in 1308 ms (875 modules)
在浏览器里打开 http://localhost:8000/,能看到以下界面,
启用 Prettier(可选)
如果需要用 prettier 做项目代码的自动格式化,执行 pnpm umi g
,
$ pnpm umi g✔ Pick generator type › Enable Prettier -- Enable Prettierinfo - Write package.jsoninfo - Write .prettierrcinfo - Write .prettierignoreinfo - Install dependencies with pnpm
部署发布
执行 pnpm build
命令,
> umi buildevent - compiled successfully in 1179 ms (567 modules)event - build index.html
产物默认会生成到 ./dist
目录下,
./dist├── index.html├── umi.css└── umi.js
完成构建后,就可以把 dist 目录部署到服务器上了。