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
执行后,对应的路由文件、样式文件都会自动生成,省去了手动创建目录和文件的麻烦。


