安装搭建 Ant Design Pro V5 开发环境

正在开发一套企业客户的管理后台，但是 Django Admin 的界面太简陋， 虽然简洁清爽，但是看起来不值钱。。。

本想用 vue-element-admin 来替代 Django Admin，但是同事说之前用过 Ant Design， 既然没有沟通成本，我也想尝试一下 Ant Design Pro 做管理后台。毕竟界面看起来非常高大上。

管理工具安装

首先使用 nvm 安装最新的 node LTS 版本。

然后安装 npm, yarn 等工具。

sudo apt install npm   // node 自带了 npm，实际上不需要单独安装
npm install yarn tyarn cross-env umi -g

新建项目

tyarn create umi myapp

选择：

• ant-design-pro
• Pro V5

结果如下

? Select the boilerplate type ant-design-pro
? 🧙 Be the first to experience the new umi@3 ? Pro V5

似乎 V5 出了正式版之后，就不必手动选择 V5 了。

依赖安装

cd myapp
tyarn

运行前端服务

tyarn start

打开浏览器体验

http://localhost:8000/

Ant Design Pro 的界面确实看起来更适合企业应用。

cross-env: not found

sudo npm install cross-env -g

Error: spawn umi ENOENT

sudo npm install umi -g

Cannot find module 'umi'

重新安装依赖

npm install

但是，这跟执行 tyarn 有何区别呢？ 为何执行 tyarn 并不能解决 umi 的依赖问题？

tyarn add umi 

可解决

Error: EACCES: permission denied, open '/usr/lib/node_modules/umi/node_modules/esbuild/bin/esbuild__'

遇到此错误时，给 npm 命令缀上 --unsafe-perm=true 即可：

sudo npm install yarn tyarn cross-env umi -g --unsafe-perm=true

Expected version ">=12.0.0". Got "10.19.0"

error react-dev-inspector@1.6.0: The engine "node" is incompatible with this module. Expected version ">=12.0.0". Got "10.19.0"
error Found incompatible module.

参考上面的链接，安装最新 node。

参考

• https://pro.ant.design/docs/getting-started-cn