1. 创建项目

  • 使用 create umi 来快速的初始化脚手架（不需要提前建好目录）

    1. # 使用 npm
    2. $ npx create-umi myapp
    3. # 使用 yarn
    4. $ tyarn create umi myapp

  • 按照 umi 脚手架的引导，第一步先选择 ant-design-pro：

    1. ? Select the boilerplate type (Use arrow keys)
    2. ❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
    3. app             - Create project with a simple boilerplate, support typescript.
    4. plugin          - Create a umi plugin.

  • 选择版本 Pro V5

    1. ? Select the boilerplate type ant-design-pro
    2. ? 🧙 Be the first to experience the new umi@3 ?
    3. ❯ Pro V5
    4. Pro V4

  • 安装依赖

    1. $ cd myapp && tyarn
    2. // 或
    3. $ cd myapp && npm install

2. 运行

  1. $ tyarn run start
  2. // 或
  3. $ npm run start

image.png

  • 访问

启用Chrom浏览器访问地址http://localhost:8000/user/login
image.png

3. 使用Umi UI

由于 Umi 3 使用微内核架构，将之前 Umi UI 拆分到独立的仓库，通过加载 @umijs/preset-ui 使用 Umi UI。

V5的脚手架没有提供V4那种复杂的范例，但我们可以利用Umi UI自己添加一些模板进来。在项目中执行：

  1. $ tyarn add @umijs/preset-ui -D
  2. $ tyarn run start
  3. // 或
  4. $ npm install --save-dev @umijs/preset-ui
  5. $ npm run start

再次登录进入范例页面以后，在浏览器右下角可以看到这个“气泡”
image.png
点击它可以启动UmiUI，给当前项目增加模块或模板资源。

关于UmiUI的更多内容见 https://umijs.org/zh-CN/docs/use-umi-ui

4. 参考

更多的Ant Design Pro V5内容参见 https://beta-pro.ant.design/docs/getting-started-cn