Umi 脚手架创建项目实战指南

Umi 脚手架创建项目实战指南

在动手之前，确保你的 Node 版本在 8.10 以上。如果还没装好 Umi，可以通过 yarn 或 npm 全局安装。

yarn global add umi
# 或者
npm install -g umi

安装完成后，用 umi -v 检查一下版本号。如果没反应，多半是环境变量没配好，或者安装路径不在系统 PATH 里。

命令行创建

这是最快捷的方式。在项目根目录执行：

npx create-umi

注意这里用的是 npx，它会自动拉取最新的脚手架工具。

接下来会进入交互式菜单，主要选项包括：

• project：通用模板，支持选 TypeScript 和功能插件。
• ant-design-pro：带布局的脚手架，适合后台管理系统。
• block：区块脚手架。
• plugin：插件开发。
• library：组件库开发。

新手建议选 project，TypeScript 根据熟悉程度勾选，不熟悉就选否，后续再集成也不迟。回车确认后，脚手架会自动下载依赖并初始化项目。

启动项目很简单：

npm run start

默认监听 8000 端口，浏览器打开即可看到效果。

图形界面创建

如果不习惯敲命令，可以用 umi ui 启动可视化向导。

umi ui

稍等片刻，浏览器会自动弹出一个管理页面。点击'创建项目'，选择存放目录并命名，剩下的交给它自动处理。

过程中它会询问是否开启 Dva、Ant Design、国际化、热加载等功能。如果不确定需求，先选最简单的组合，后期按需添加更稳妥。

项目建好后，可以在页面直接查看配置和任务状态，甚至直接添加 Ant Design 资源。

快速生成页面

无论哪种方式创建的项目，生成新页面都统一用这个命令：

umi g page newpage

执行后，对应的路由文件、样式文件都会自动生成，省去了手动创建目录和文件的麻烦。