安装搭建 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 
    

    可解决

    或者

    yarn 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

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式