526互联

[Ant Design Pro] a brief note when trying a frontend framework

发布时间 2023-09-23 11:00:31作者: HighHill

I'm a backend developer and know little about frontend. but recently I tried a frontend building tool, Ant Design Pro. Here is an note when initiating an application.(according to ant design, it may be helpful to use tyarn instead of npm in China for network concern, for tyarn changes the mimorr address).

  • nodejs & npm --> v18.18

    Index of /nodejs-release/v20.7.0/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror

    config env $PATH

  • using tyarn instead of npm as a package manager

    $ npm install yarn tyarn -g

  • install ant

    $ tyarn add antd

  • initiate the application

    npm i @ant-design/pro-cli -g
    $pro create <app_name>

    using unit@4

  • dwonload webstorm(a front-end IDE) and open the app with webstorm

  • install dependent packages

    $ cd <app_name> && yarn

  • [optional] remove unneccessary modules, e.g. 118n by clicking the button beside 118n in file package.json. an issue may happen, executing

    yarn add eslint-config-prettier --dev yarn add eslint-plugin-unicorn --dev

    and annotating es2022: true in file node_modules/@umijs/lint/dist/config/eslint/index.js.

  • you can modify routes in config/routes.ts

    reference: 启动项目 - Ant Design Pro启动项目 - Ant Design Pro