通过脚手架创建项目
介绍 create-umi
umi 通过 create-umi 提供脚手架能力,包含:
- project,通用项目脚手架,支持选择是否启用 TypeScript,以及 umi-plugin-react 包含的功能
- ant-design-pro,仅包含 ant-design-pro 布局的脚手架,具体页面可通过 umi block 添加
- block,区块脚手架
- plugin,插件脚手架
- library,依赖(组件)库脚手架,基于 umi-plugin-library
创建 umi 项目
你可以通过
yarn create umi
或npm create umi
使用 create-umi。推荐使用yarn create
命令,能确保每次使用最新的脚手架。
首先,在新目录下使用 yarn create umi
,
$ mkdir myapp && cd myapp
$ yarn create umi
FAQ:如果提示 create-umi 命令不存在,你需要执行
yarn global bin
,然后把 global bin 的路径添加到环境变量PATH
中。
选择 project,
? Select the boilerplate type (Use arrow keys)
ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
❯ app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
选择是否使用 TypeScript,
? Do you want to use typescript? (y/N)
然后,选择你需要的功能,功能介绍详见 plugin/umi-plugin-react,
? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd
◯ dva
◯ code splitting
◯ dll
确定后,会根据你的选择自动创建好目录和文件,
create package.json
create .gitignore
create .editorconfig
create .env
create .eslintrc
create .prettierignore
create .prettierrc
create .umirc.js
create mock/.gitkeep
create src/app.js
create src/assets/yay.jpg
create src/global.css
create src/layouts/index.css
create src/layouts/index.js
create src/models/.gitkeep
create src/pages/index.css
create src/pages/index.js
create webpack.config.js
✨ File Generate Done
✨ Done in 161.20s.
然后安装依赖,
$ yarn
最后通过 yarn start
启动本地开发,
$ yarn start
如果顺利,在浏览器打开 http://localhost:8000 可看到以下界面,