ant-design-pro 实做

壤驷高洁
2023-12-01

脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由和菜单的基本框架,主要涉及以下几个模块/功能:

  • 路由管理 通过约定的语法根据在 router.config.js 中配置路由。

  • 菜单生成 根据路由配置来生成菜单。菜单项名称,嵌套路径与路由高度耦合。

  • 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。

下面简单介绍下各个模块的基本思路,如果你对实现过程不感兴趣,只想了解应该怎么实现相关需求,可以直接查看需求实例

1.创建工程

[livingbody@localhost antdtest]$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
正克隆到 'my-project'...
remote: Enumerating objects: 552, done.
remote: Counting objects: 100% (552/552), done.
remote: Compressing objects: 100% (509/509), done.
remote: Total 552 (delta 46), reused 232 (delta 25), pack-reused 0
接收对象中: 100% (552/552), 277.22 KiB | 75.00 KiB/s, 完成.
处理 delta 中: 100% (46/46), 完成.
[livingbody@localhost antdtest]$ cd my-project/

2.工程结构 

[livingbody@localhost my-project]$ tree
.
├── appveyor.yml
├── CODE_OF_CONDUCT.md
├── config
│   ├── config.js
│   ├── plugin.config.js
│   └── router.config.js
├── docker
│   ├── docker-compose.dev.yml
│   ├── docker-compose.yml
│   └── nginx.conf
├── Dockerfile
├── Dockerfile.dev
├── Dockerfile.hub
├── firebase.json
├── functions
│   ├── index.js
│   ├── matchMock.js
│   └── package.json
├── jest.config.js
├── jest-puppeteer.config.js
├── jsconfig.json
├── LICENSE
├── mock
│   ├── api.js
│   ├── chart.js
│   ├── geographic
│   │   ├── city.json
│   │   └── province.json
│   ├── geographic.js
│   ├── notices.js
│   ├── profile.js
│   ├── rule.js
│   └── user.js
├── netlify.toml
├── package.json
├── public
│   ├── favicon.png
│   └── icons
│       ├── icon-128x128.png
│       ├── icon-192x192.png
│       └── icon-512x512.png
├── README.md
├── README.ru-RU.md
├── README.zh-CN.md
├── scripts
│   ├── generateMock.js
│   ├── lint-prettier.js
│   └── prettier.js
├── src
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   ├── ActiveChart
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── ArticleListContent
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── Authorized
│   │   │   ├── Authorized.js
│   │   │   ├── AuthorizedRoute.d.ts
│   │   │   ├── AuthorizedRoute.js
│   │   │   ├── CheckPermissions.js
│   │   │   ├── CheckPermissions.test.js
│   │   │   ├── demo
│   │   │   │   ├── AuthorizedArray.md
│   │   │   │   ├── AuthorizedFunction.md
│   │   │   │   ├── basic.md
│   │   │   │   └── secured.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.md
│   │   │   ├── PromiseRender.js
│   │   │   ├── renderAuthorize.js
│   │   │   └── Secured.js
│   │   ├── AvatarList
│   │   │   ├── AvatarItem.d.ts
│   │   │   ├── demo
│   │   │   │   ├── maxLength.md
│   │   │   │   └── simple.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.test.js
│   │   │   └── index.zh-CN.md
│   │   ├── Charts
│   │   │   ├── autoHeight.js
│   │   │   ├── Bar
│   │   │   │   ├── index.d.ts
│   │   │   │   └── index.js
│   │   │   ├── bizcharts.d.ts
│   │   │   ├── bizcharts.js
│   │   │   ├── ChartCard
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   ├── demo
│   │   │   │   ├── bar.md
│   │   │   │   ├── chart-card.md
│   │   │   │   ├── gauge.md
│   │   │   │   ├── mini-area.md
│   │   │   │   ├── mini-bar.md
│   │   │   │   ├── mini-pie.md
│   │   │   │   ├── mini-progress.md
│   │   │   │   ├── mix.md
│   │   │   │   ├── pie.md
│   │   │   │   ├── radar.md
│   │   │   │   ├── tag-cloud.md
│   │   │   │   ├── timeline-chart.md
│   │   │   │   └── waterwave.md
│   │   │   ├── Field
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   ├── g2.js
│   │   │   ├── Gauge
│   │   │   │   ├── index.d.ts
│   │   │   │   └── index.js
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.md
│   │   │   ├── MiniArea
│   │   │   │   ├── index.d.ts
│   │   │   │   └── index.js
│   │   │   ├── MiniBar
│   │   │   │   ├── index.d.ts
│   │   │   │   └── index.js
│   │   │   ├── MiniProgress
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   ├── Pie
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   ├── Radar
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   ├── TagCloud
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   ├── TimelineChart
│   │   │   │   ├── index.d.ts
│   │   │   │   ├── index.js
│   │   │   │   └── index.less
│   │   │   └── WaterWave
│   │   │       ├── index.d.ts
│   │   │       ├── index.js
│   │   │       └── index.less
│   │   ├── CountDown
│   │   │   ├── demo
│   │   │   │   └── simple.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   └── index.zh-CN.md
│   │   ├── DescriptionList
│   │   │   ├── demo
│   │   │   │   ├── basic.md
│   │   │   │   └── vertical.md
│   │   │   ├── Description.d.ts
│   │   │   ├── Description.js
│   │   │   ├── DescriptionList.js
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.zh-CN.md
│   │   │   └── responsive.js
│   │   ├── EditableItem
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── EditableLinkGroup
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── Ellipsis
│   │   │   ├── demo
│   │   │   │   ├── line.md
│   │   │   │   └── number.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.test.js
│   │   │   └── index.zh-CN.md
│   │   ├── Exception
│   │   │   ├── demo
│   │   │   │   ├── 403.md
│   │   │   │   ├── 404.md
│   │   │   │   └── 500.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.zh-CN.md
│   │   │   └── typeConfig.js
│   │   ├── FooterToolbar
│   │   │   ├── demo
│   │   │   │   └── basic.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── index.zh-CN.md
│   │   ├── GlobalFooter
│   │   │   ├── demo
│   │   │   │   └── basic.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── index.md
│   │   ├── GlobalHeader
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── RightContent.js
│   │   ├── HeaderDropdown
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── HeaderSearch
│   │   │   ├── demo
│   │   │   │   └── basic.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── index.zh-CN.md
│   │   ├── Login
│   │   │   ├── demo
│   │   │   │   └── basic.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.zh-CN.md
│   │   │   ├── loginContext.js
│   │   │   ├── LoginItem.d.ts
│   │   │   ├── LoginItem.js
│   │   │   ├── LoginSubmit.js
│   │   │   ├── LoginTab.d.ts
│   │   │   ├── LoginTab.js
│   │   │   └── map.js
│   │   ├── NoticeIcon
│   │   │   ├── demo
│   │   │   │   ├── basic.md
│   │   │   │   └── popover.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.zh-CN.md
│   │   │   ├── NoticeIconTab.d.ts
│   │   │   ├── NoticeList.js
│   │   │   └── NoticeList.less
│   │   ├── NumberInfo
│   │   │   ├── demo
│   │   │   │   └── basic.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.en-US.md
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── index.zh-CN.md
│   │   ├── PageHeader
│   │   │   ├── breadcrumb.d.ts
│   │   │   ├── breadcrumb.js
│   │   │   ├── demo
│   │   │   │   ├── image.md
│   │   │   │   ├── simple.md
│   │   │   │   ├── standard.md
│   │   │   │   └── structure.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.md
│   │   │   └── index.test.js
│   │   ├── PageHeaderWrapper
│   │   │   ├── GridContent.js
│   │   │   ├── GridContent.less
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── PageLoading
│   │   │   └── index.js
│   │   ├── Result
│   │   │   ├── demo
│   │   │   │   ├── classic.md
│   │   │   │   ├── error.md
│   │   │   │   └── structure.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── index.md
│   │   ├── SelectLang
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── SettingDrawer
│   │   │   ├── BlockCheckbox.js
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── ThemeColor.js
│   │   │   └── ThemeColor.less
│   │   ├── SiderMenu
│   │   │   ├── BaseMenu.js
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── SiderMenu.js
│   │   │   ├── SiderMenu.test.js
│   │   │   └── SiderMenuUtils.js
│   │   ├── StandardFormRow
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── StandardTable
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── TagSelect
│   │   │   ├── demo
│   │   │   │   ├── controlled.md
│   │   │   │   ├── expandable.md
│   │   │   │   └── simple.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   ├── index.md
│   │   │   └── TagSelectOption.d.ts
│   │   ├── TopNavHeader
│   │   │   ├── index.js
│   │   │   └── index.less
│   │   ├── Trend
│   │   │   ├── demo
│   │   │   │   ├── basic.md
│   │   │   │   └── reverse.md
│   │   │   ├── index.d.ts
│   │   │   ├── index.js
│   │   │   ├── index.less
│   │   │   └── index.md
│   │   └── _utils
│   │       ├── pathTools.js
│   │       └── pathTools.test.js
│   ├── defaultSettings.js
│   ├── e2e
│   │   ├── baseLayout.e2e.js
│   │   ├── home.e2e.js
│   │   ├── login.e2e.js
│   │   ├── topMenu.e2e.js
│   │   └── userLayout.e2e.js
│   ├── global.js
│   ├── global.less
│   ├── layouts
│   │   ├── BasicLayout.js
│   │   ├── BasicLayout.less
│   │   ├── BlankLayout.js
│   │   ├── Footer.js
│   │   ├── Header.js
│   │   ├── Header.less
│   │   ├── MenuContext.js
│   │   ├── UserLayout.js
│   │   └── UserLayout.less
│   ├── locales
│   │   ├── en-US
│   │   │   ├── analysis.js
│   │   │   ├── exception.js
│   │   │   ├── form.js
│   │   │   ├── globalHeader.js
│   │   │   ├── login.js
│   │   │   ├── menu.js
│   │   │   ├── monitor.js
│   │   │   ├── pwa.js
│   │   │   ├── result.js
│   │   │   ├── settingDrawer.js
│   │   │   └── settings.js
│   │   ├── en-US.js
│   │   ├── pt-BR
│   │   │   ├── analysis.js
│   │   │   ├── exception.js
│   │   │   ├── form.js
│   │   │   ├── globalHeader.js
│   │   │   ├── login.js
│   │   │   ├── menu.js
│   │   │   ├── monitor.js
│   │   │   ├── pwa.js
│   │   │   ├── result.js
│   │   │   ├── settingDrawer.js
│   │   │   └── settings.js
│   │   ├── pt-BR.js
│   │   ├── zh-CN
│   │   │   ├── analysis.js
│   │   │   ├── exception.js
│   │   │   ├── form.js
│   │   │   ├── globalHeader.js
│   │   │   ├── login.js
│   │   │   ├── menu.js
│   │   │   ├── monitor.js
│   │   │   ├── pwa.js
│   │   │   ├── result.js
│   │   │   ├── settingDrawer.js
│   │   │   └── settings.js
│   │   ├── zh-CN.js
│   │   ├── zh-TW
│   │   │   ├── analysis.js
│   │   │   ├── exception.js
│   │   │   ├── form.js
│   │   │   ├── globalHeader.js
│   │   │   ├── login.js
│   │   │   ├── menu.js
│   │   │   ├── monitor.js
│   │   │   ├── pwa.js
│   │   │   ├── result.js
│   │   │   ├── settingDrawer.js
│   │   │   └── settings.js
│   │   └── zh-TW.js
│   ├── manifest.json
│   ├── models
│   │   ├── global.js
│   │   ├── list.js
│   │   ├── login.js
│   │   ├── menu.js
│   │   ├── project.js
│   │   ├── setting.js
│   │   └── user.js
│   ├── pages
│   │   ├── 404.js
│   │   ├── Account
│   │   │   ├── Center
│   │   │   │   ├── Applications.js
│   │   │   │   ├── Articles.js
│   │   │   │   ├── Articles.less
│   │   │   │   ├── Center.js
│   │   │   │   ├── Center.less
│   │   │   │   └── Projects.js
│   │   │   └── Settings
│   │   │       ├── BaseView.js
│   │   │       ├── BaseView.less
│   │   │       ├── BindingView.js
│   │   │       ├── GeographicView.js
│   │   │       ├── GeographicView.less
│   │   │       ├── Info.js
│   │   │       ├── Info.less
│   │   │       ├── models
│   │   │       │   └── geographic.js
│   │   │       ├── NotificationView.js
│   │   │       ├── PhoneView.js
│   │   │       ├── PhoneView.less
│   │   │       └── SecurityView.js
│   │   ├── Authorized.js
│   │   ├── Dashboard
│   │   │   ├── Analysis.js
│   │   │   ├── Analysis.less
│   │   │   ├── IntroduceRow.js
│   │   │   ├── models
│   │   │   │   ├── activities.js
│   │   │   │   ├── chart.js
│   │   │   │   └── monitor.js
│   │   │   ├── Monitor.js
│   │   │   ├── Monitor.less
│   │   │   ├── OfflineData.js
│   │   │   ├── ProportionSales.js
│   │   │   ├── SalesCard.js
│   │   │   ├── TopSearch.js
│   │   │   ├── Workplace.js
│   │   │   └── Workplace.less
│   │   ├── document.ejs
│   │   ├── Exception
│   │   │   ├── 403.js
│   │   │   ├── 404.js
│   │   │   ├── 500.js
│   │   │   ├── models
│   │   │   │   └── error.js
│   │   │   ├── style.less
│   │   │   └── TriggerException.js
│   │   ├── Forms
│   │   │   ├── AdvancedForm.js
│   │   │   ├── BasicForm.js
│   │   │   ├── models
│   │   │   │   └── form.js
│   │   │   ├── StepForm
│   │   │   │   ├── index.js
│   │   │   │   ├── Step1.js
│   │   │   │   ├── Step2.js
│   │   │   │   ├── Step3.js
│   │   │   │   └── style.less
│   │   │   ├── style.less
│   │   │   └── TableForm.js
│   │   ├── List
│   │   │   ├── Applications.js
│   │   │   ├── Applications.less
│   │   │   ├── Articles.js
│   │   │   ├── Articles.less
│   │   │   ├── BasicList.js
│   │   │   ├── BasicList.less
│   │   │   ├── CardList.js
│   │   │   ├── CardList.less
│   │   │   ├── List.js
│   │   │   ├── models
│   │   │   │   └── rule.js
│   │   │   ├── Projects.js
│   │   │   ├── Projects.less
│   │   │   ├── TableList.js
│   │   │   └── TableList.less
│   │   ├── Profile
│   │   │   ├── AdvancedProfile.js
│   │   │   ├── AdvancedProfile.less
│   │   │   ├── BasicProfile.js
│   │   │   ├── BasicProfile.less
│   │   │   └── models
│   │   │       └── profile.js
│   │   ├── Result
│   │   │   ├── Error.js
│   │   │   ├── Success.js
│   │   │   └── Success.test.js
│   │   └── User
│   │       ├── Login.js
│   │       ├── Login.less
│   │       ├── models
│   │       │   └── register.js
│   │       ├── Register.js
│   │       ├── Register.less
│   │       ├── RegisterResult.js
│   │       └── RegisterResult.less
│   ├── services
│   │   ├── api.js
│   │   ├── error.js
│   │   ├── geographic.js
│   │   └── user.js
│   ├── service-worker.js
│   └── utils
│       ├── authority.js
│       ├── authority.test.js
│       ├── Authorized.js
│       ├── request.js
│       ├── utils.js
│       ├── utils.less
│       ├── utils.test.js
│       └── Yuan.js
├── tests
│   └── run-tests.js
├── tsconfig.json
└── tslint.json

102 directories, 437 files

3.依赖安装 

[livingbody@localhost my-project]$ sudo cnpm install
⠸ [60/64] Installing minimist@1.1.xplatform unsupported umi@2.3.0 › umi-build-dev@1.3.0 › chokidar@2.0.4 › fsevents@^1.2.2 Package require os(darwin) not compatible with your platform(linux)
[fsevents@^1.2.2] optional install error: Package require os(darwin) not compatible with your platform(linux)
✔ Installed 64 packages
✔ Linked 1699 latest versions
Downloading Chromium r609904 - 106.4 Mb [====================] 100% 0.0s 
Chromium downloaded to /home/livingbody/antdtest/my-project/node_modules/_puppeteer@1.11.0@puppeteer/.local-chromium/linux-609904
husky > setting up git hooks
husky > done
Love Preact? You can now donate to our open collective:
 > https://opencollective.com/preact/donate
✔ Run 3 scripts
peerDependencies link redux@3.7.2 in /home/livingbody/antdtest/my-project/node_modules/_react-redux@5.0.7@react-redux unmet with /home/livingbody/antdtest/my-project/node_modules/redux(4.0.1)
peerDependencies link redux@3.7.2 in /home/livingbody/antdtest/my-project/node_modules/_react-redux@5.1.1@react-redux unmet with /home/livingbody/antdtest/my-project/node_modules/redux(4.0.1)
peerDependencies link webpack@4.26.1 in /home/livingbody/antdtest/my-project/node_modules/_workbox-webpack-plugin@3.6.3@workbox-webpack-plugin unmet with /home/livingbody/antdtest/my-project/node_modules/webpack(4.28.1)
peerDependencies link react@16.6.3 in /home/livingbody/antdtest/my-project/node_modules/_react-router-config@4.4.0-beta.6@react-router-config unmet with /home/livingbody/antdtest/my-project/node_modules/react(16.7.0)
peerDependencies link enzyme@3.7.0 in /home/livingbody/antdtest/my-project/node_modules/_enzyme-adapter-react-16@1.7.0@enzyme-adapter-react-16 unmet with /home/livingbody/antdtest/my-project/node_modules/enzyme(3.8.0)
peerDependencies link react@16.6.3 in /home/livingbody/antdtest/my-project/node_modules/_enzyme-adapter-react-16@1.7.0@enzyme-adapter-react-16 unmet with /home/livingbody/antdtest/my-project/node_modules/react(16.7.0)
peerDependencies link react-dom@16.6.3 in /home/livingbody/antdtest/my-project/node_modules/_enzyme-adapter-react-16@1.7.0@enzyme-adapter-react-16 unmet with /home/livingbody/antdtest/my-project/node_modules/react-dom(16.7.0)
peerDependencies link react@16.6.3 in /home/livingbody/antdtest/my-project/node_modules/_enzyme-adapter-utils@1.9.0@enzyme-adapter-utils unmet with /home/livingbody/antdtest/my-project/node_modules/react(16.7.0)
peerDependencies link react@16.6.3 in /home/livingbody/antdtest/my-project/node_modules/_react-test-renderer@16.7.0@react-test-renderer unmet with /home/livingbody/antdtest/my-project/node_modules/react(16.7.0)
peerDependencies link tslint@5.11.0 in /home/livingbody/antdtest/my-project/node_modules/_fork-ts-checker-webpack-plugin@0.5.0@fork-ts-checker-webpack-plugin unmet with /home/livingbody/antdtest/my-project/node_modules/tslint(5.12.0)
peerDependencies link tslint@5.11.0 in /home/livingbody/antdtest/my-project/node_modules/_tslint-loader@3.5.4@tslint-loader unmet with /home/livingbody/antdtest/my-project/node_modules/tslint(5.12.0)
peerDependencies link react@16.6.3 in /home/livingbody/antdtest/my-project/node_modules/_react-dom@16.6.3@react-dom unmet with /home/livingbody/antdtest/my-project/node_modules/react(16.7.0)
peerDependencies WARNING react-fittext@^1.0.0 requires a peer of react@^15.0.0 but react@16.7.0 was installed
peerDependencies WARNING umi@2.3.0 › umi-build-dev@1.3.0 › react-router-config@4.4.0-beta.6 requires a peer of react-router@4.4.0-beta.1 but react-router@4.3.1 was installed
peerDependencies WARNING umi-plugin-react@1.3.0 › umi-plugin-dva@1.3.0 › dva-loading@2.1.0-beta.2 requires a peer of dva-core@^1.1.0 but dva-core@1.5.0-beta.2 was installed
peerDependencies WARNING react-fittext@^1.0.0 requires a peer of react-dom@^15.0.0 but react-dom@16.7.0 was installed
deprecate dva@2.4.1 › react-router-redux@5.0.0-alpha.9 This project is no longer maintained.
deprecate babel-eslint@10.0.1 › eslint@5.11.1 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-json@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate merge-umi-mock-data@0.0.3 › rollup-plugin-node-builtins@2.1.2 › browserify-fs@1.0.0 › level-filesystem@1.2.0 › level-sublevel@5.2.3 › xtend@2.0.6 › object-keys@~0.2.0 Please update to the latest object-keys
anti semver umi@2.3.0 › umi-build-dev@1.3.0 › umi-test@1.3.0 › ts-jest@23.10.5 › resolve@1.x delcares resolve@1.x(resolved as 1.9.0) but using ancestor(umi-build-dev)'s dependency resolve@1.8.1(resolved as 1.8.1)
deprecate umi@2.3.0 › umi-build-dev@1.3.0 › umi-test@1.3.0 › jest@23.6.0 › jest-cli@23.6.0 › prompts@0.1.14 › kleur@^2.0.1 Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
Recently updated (since 2018-12-21): 45 packages (detail see file /home/livingbody/antdtest/my-project/node_modules/.recently_updates.txt)
  Today:
    → eslint-plugin-compat@2.6.3 › browserslist@4.3.6 › caniuse-lite@^1.0.30000921(1.0.30000925) (11:32:38)
    → eslint-plugin-compat@2.6.3 › caniuse-db@^1.0.30000889(1.0.30000925) (10:55:22)
    → umi@^2.2.7(2.3.0) (10:50:14)
    → umi-plugin-react@^1.2.0(1.3.0) (10:49:59)
    → umi@2.3.0 › babel-preset-umi@1.3.0(1.3.0) (10:49:19)
    → umi@2.3.0 › umi-utils@1.3.0(1.3.0) (10:50:09)
    → umi@2.3.0 › umi-build-dev@1.3.0(1.3.0) (10:49:30)
    → umi-plugin-react@1.3.0 › umi-plugin-dll@1.3.0(1.3.0) (10:49:35)
    → umi-plugin-react@1.3.0 › umi-plugin-hd@1.3.0(1.3.0) (10:49:44)
    → umi-plugin-react@1.3.0 › umi-plugin-dva@1.3.0(1.3.0) (10:49:40)
    → umi@2.3.0 › umi-build-dev@1.3.0 › af-webpack@1.3.0(1.3.0) (10:49:13)
    → umi-plugin-react@1.3.0 › umi-plugin-polyfills@1.3.0(1.3.0) (10:49:55)
    → umi-plugin-react@1.3.0 › umi-plugin-locale@2.3.0(2.3.0) (10:49:49)
    → umi@2.3.0 › umi-build-dev@1.3.0 › umi-test@1.3.0(1.3.0) (10:50:05)
    → umi@2.3.0 › umi-build-dev@1.3.0 › yeoman-generator@3.1.1 › shelljs@0.8.3 › interpret@^1.0.0(1.2.0) (10:56:08)
✔ All packages installed (2035 packages installed from npm registry, used 3m(network 54s), speed 797.85kB/s, json 1763(4.06MB), tarball 37.91MB)

4.启动工程 

[livingbody@localhost my-project]$ sudo cnpm start
[sudo] livingbody 的密码:

> ant-design-pro@2.1.1 start /home/livingbody/antdtest/my-project
> cross-env APP_TYPE=site umi dev


✔ Webpack
  Compiled successfully in 33.42s

(node:13381) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Starting the development server...

Theme generated successfully
 DONE  Compiled successfully in 33418ms                                                    14:30:19


  App running at:
  - Local:   http://localhost:8000/ (copied to clipboard)
  - Network: http://192.168.43.47:8000/

 WAIT  Compiling...                                                                        14:30:20

(node:13381) UnhandledPromiseRejectionWarning: Error: Couldn't find the required `xsel` binary. On Debian/Ubuntu you can install it with: sudo apt install xsel
    at handler (/home/livingbody/antdtest/my-project/node_modules/_clipboardy@1.2.3@clipboardy/lib/linux.js:7:9)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:13381) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 12)
(node:13381) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

✔ Webpack
  Compiled successfully in 2.77s

 DONE  Compiled successfully in 2770ms                                                     14:30:23

5.getting the target... 

 

 类似资料: