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

更新日期: 2022-03-24 阅读次数: 6832 字数: 393 分类: ReactJS

正在开发一套企业客户的管理后台,但是 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

tags: tyarn

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式