【Ant Design Pro】在Mac配置运行Ant Design Pro及配置运行时遇到部分报错的解决方案

作者:CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

首先我们想要配置Ant Design Pro,必须先知道他的网址,这里我直接贴出网址,大家有需要可以直接点击跳转:

开箱即用的中台前端/设计解决方案 - Ant Design Pro

进入后,我们就可以点击开始使用,进入配置文档。

我们在Mac中,创建文件夹并右键,从该界面进入终端,即可开始配置,具体打开方式如下:

打开之后,我们按照官方文档中的顺序,一步步输入指令,若一切顺利,就可以顺利完成编程。

这里我也贴出代码,给不方便复制,或者不知道复制哪些的小伙伴指条明路:

官方配置Ant Design Pro方法简述

第一步:初始化脚手架pro-cli

复制代码
# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp

第二步:选择umi

复制代码
? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

这里选择3或4都可以,如果选择了 umi@3,还可以选择 pro 的模板,pro 是基础模板,只提供了框架运行的基本内容,complete 包含所有区块,不太适合当基础模板来进行二次开发。如果选择了 umi@4 版本,暂时还不支持全量区块。

第三步:脚手架选择

复制代码
? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

这里选择simple或着complete都可以,看个人选择,我选择的是simple

第四步:选择依赖

复制代码
cd myapp && tyarn
// 或
cd myapp && npm install

这里选择哪个都可以,我选择了第二个,因为输入第一个时,终端提示无法识别tyarn,故我直接选择第二个,完成了安装。

此时如果一切顺利,就可以使用npm run start进行运行了。

配置中遇到的部分报错的解决方案

报错1

No change to package.json was detected. No package manager install will be executed

如果遇到这个报错,它表明 package.json 文件自上次以来没有发生变化,因此不需要再次运行包管理器(如 npm 或 yarn)来安装依赖。

此时我们应该确保在正确的目录运行,或强制重新安装所有的依赖项:

复制代码
rm -rf node_modules yarn.lock
yarn install

报错2

方法1使用sudo管理员权限

如果遇到如EACCES: permission denied 这样的报错,这个表示表明当前用户没有足够的权限在 /usr/local/lib/node_modules/ 目录下创建文件或目录。这是因为全局安装 npm 包通常需要管理员权限。

我们可以使用sudo npm i -g @ant-design/pro-cli这样加上sudo的代码来解决问题,然后输入开机密码,之后再运行 pro create myapp 创建项目就可以解决。

方法2更改 npm 全局目录

首先,创建一个新的目录用于存放全局包:

复制代码
mkdir ~/.npm-global

然后配置 npm 使用这个新的目录作为全局目录:

复制代码
npm config set prefix '~/.npm-global'

更新你的 PATH 环境变量,以便能够找到全局安装的包和二进制文件。将以下行添加到你的 shell 配置文件(例如 .bashrc, .zshrc 等):

复制代码
export PATH=~/.npm-global/bin:$PATH

最后,重新加载 shell 配置文件:

复制代码
source ~/.bashrc  # 或者 source ~/.zshrc

然后就可以用普通用户权限安装全局包了

作者:CSDN-PleaSure乐事

希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!

相关推荐
福兮说36 分钟前
JSON 格式正确,数据就可靠吗?我用一份自编配置检查类型与空值
java·前端·json
益莱储中国1 小时前
深度解析:RF 实验室从 5G迈向 6G 的过程中保持技术领先与设备升级的路径
开发语言·php
benchmark_cc2 小时前
Python 量化系统如何设计统一的数据访问接口:从策略解耦到数据层架构
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash
程序员老赵2 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
Swot2 小时前
Asciidoctor 公式数字下标错位问题:原因分析与解决方案
前端
Swot2 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
const_qiu2 小时前
第四章 00:开篇 —— 从「会聊天」到「记得住、会干活、能协作」
java·开发语言·人工智能·python
Wang's Blog3 小时前
Java 项目实战: 交友项目 - 个人资料管理的更新接口实现与坑
java·开发语言·交友
狒狒AI3 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测:代码渲染知识视频的选栈方法(附开源技能)
前端·人工智能·aigc
修炼的dance3 小时前
浏览器里导出H.265,8.5秒和55.5秒差在硬件
前端