明凡编程宝典

# 前端初始化 Ant Design Pro 笔记

作者：D (opens new window)，编程导航星球 (opens new window) 编号 29052

  1. npm i @ant-design/pro-cli -g
  2. npx pro create myapp

# 注意 如果需要UMI UI插件就选择umi@3

img 3. 打开项目后，需要运行npm

  1. 终端运行yarn,下载依赖
  2. 运行：在package.json中找到start并运行

# 然后就是小米饭插件的构建，这里请运行下面的命令，且保证是在umi@3项目中 （重要的事情说三遍文件夹myapp）

  1. yarn add @umijs/preset-ui -D

# Node降级

# 使用nvm

下面是nvm的下载地址（推荐下载1.1.7 nvm-setup.zip）

https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7

# 解压，安装后在终端查看是否安装成功：nvm -v

如果出现nvm的版本号就是成功！！！

# nvm配置淘宝镜像

在 settings.txt 文件中最后一行添加如下两行配置：

node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/

# 使用以下命令安装Node.js 16.15：（可能需要一丢丢时间，受网速影响）

nvm install 16.15

# 安装完成后，使用以下命令切换到Node.js 16.15：

nvm use 16.15

# 如果你想将Node.js 16.15设置为默认版本：

nvm alias default 16.15

# Node配置淘宝镜像

# 安装yarn

全局安装命令：

npm install -g yarn

# 同样先在yarn的安装目录下创建yarn_global和yarn_cache文件夹，并打开命令窗口执行以下命令。

  • yarn config set global-folder （跟着yarn的安装路径）
  • yarn config set cache-folder （跟着yarn的安装路径）

# 更换镜像源

yarn config set registry https://registry.yarnpkg.com (opens new window)

# 前端瘦身（只记了这几个，不敢删太多怕跑不起来）

  • 去除国际化

在package.json包中执行 “i8n-remove ” 脚本

  • src下的e2e包可以删除（里面是测试业务流程的）
  • src-services-swagger包可以删除（接口文档工具）
  • config-openapi.json(定义项目用到的接口)，看了鱼皮启动报错了，记得找到用到的openAPI配置删除
  • Tests文件可以删除（除非大项目）

# 注意删一个文件启动一遍，预防项目跑不起来！！！

# 下面是我前端初始化踩的坑

  • Node版本过高（最初Node版本是18.18.0），在运行Ant Design Pro的时候报错了，接着又弄了半天的nvm
  • 在弄nvm的时候问GPT需不需要卸载前面安装的Node版本，GPT回答不需要，然而结果是需要的，被GPT虚晃一枪了
  • 在弄小米饭插件的时候又弄了yarn,因为用的npm下的yarn然后没有配环境，又接着弄了半小时，唉，也许当初直接使用nvm就不会踩坑，浪费了好多时间
  • 接着装上小米饭插件又访问不到界面，挂了梯子也不行，emmm,问了星球里的小伙伴，还是没有找到问题所在处，也无关紧要了，反正后面用不到这个插件

# 总结

  • 了解前端初始化Ant Design Pro的过程
  • 知道了企业中是使用nvm来切换Node版本的（确实很方便）
完善页面 (opens new window)
最近更新: 11/5/2024, 2:04:48 PM
前端初始化 Ant Design Pro 笔记
明凡编程宝典   |