Ant初体验

使用 umi、dva 和 antd 从 0 开始创建一个简单应用 创建空目录

$ mkdie myapp
$ cd muapp

创建应用

$ npm install -g create-umi

yarn 会先安装最新版的 create-umi，然后提供交互式的提示来创建应用。

选择 app, 然后回车确认。

? Select the boilerplate type 
  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. 

选上 antd 和 dva，然后回车确认。

  create package.json
   create mock/.gitkeep
   create src/assets/yay.jpg
   create src/layouts/index.css
   create src/layouts/index.js
   create src/pages/index.css
   create src/pages/index.js
   create src/global.css
   create .gitignore
   create .editorconfig
   create .env
   create .umirc.js
   create .eslintrc
   create .prettierrc
   create .prettierignore
   create src/models/.gitkeep
   create src/dva.js
✨  File Generate Done
✨  Done in 966.73s

然后安装依赖，

$ yarn

然后启动应用，

$ yarn start

几秒钟后，你会看到以下输出，

 DONE  Compiled successfully in 212ms

  App running at:
  - Local:   http://localhost:8000/
  - Network: http://{{ YourIP }}:8000/

在浏览器里打开 http://localhost:8000，你会看到 umi 的欢迎界面。

新建路由

$ npx umi g page products

   create src/pages/products.js
   create src/pages/products.css
✔  success

然后在浏览器里打开 http://localhost:8000/products ，你应该能看到对应的页面。