Ant Design Pro安装过程

Ant Design Pro安装过程

# 使用 npm
npm i @ant-design/pro-cli -g(这个是安装pro-cli但是这个会直接安装新版本会导致没法选择umi,npm install -g @ant-design/pro-cli@3.1.0可以用)
pro create myapp(myapp是工厂名称,如果报错,用下面的命令)
npx pro create myapp

1.【Error】初始化ant design pro项目时遇到“pro 不是内部或外部命令”

解决办法:

pro create myapp

改为

npx pro create myapp

即可解决

2.今日(2024.5.29)拉取Ant Design Pro没有UMI选择问题参考github一个解决方案

你可以使用npm uninstall -g @ant-design/pro-cli卸载当前安装的 pro-cli,然后指定版本安装,经过测试 3.1.0 这个版本就可以选择umi版本,重新使用npm install -g @ant-design/pro-cli@3.1.0安装 pro-cli 即可。

Ant Design Pro是一个基于React的前端UI框架,它结合了Ant Design(蚂蚁设计体系)和umi.js(一套完善的React应用架构)。如果你想在项目中集成UmiJS,你可以按照以下步骤进行安装: 1. **初始化Umi项目**: 如果你还没有Umi的基础项目,首先需要创建一个新的Umi项目。打开终端,运行`npm create umi my-proj` 或者 `yarn create umi my-proj`,这会创建一个基本的Umi项目。 2. **安装依赖**: 进入项目目录后,添加Ant Design Pro作为依赖: ``` npm install @ant-design/pro-cli @ant-design/pro-components @ant-design/pro-layout --save ``` 或者使用Yarn: ``` yarn add @ant-design/pro-cli @ant-design/pro-components @ant-design/pro-layout ``` 3. **配置项目**: 使用Ant Design Pro CLI初始化项目结构: ``` umi g ant-pro-app ``` 按照提示完成配置,选择合适的主题和插件等选项。 4. **启用Ant Design Pro**: 在`src/config/pro.config.ts`或`.umi`文件夹下的`config.ts`内,导入并启用Ant Design Pro的配置: ```ts import { defineConfig } from '@umijs/core'; import { antPro } from '@ant-design/pro-cli'; export default defineConfig(antPro()); ``` 5. **修改入口**: 更新`pages`目录下的`app`组件,引入你需要的Ant Design Pro页面模板,例如: ```jsx // pages/app/index.js import { Layout } from '@ant-design/pro-layout'; import { BasicLayout } from '@ant-design/pro-layout'; // ...其他Ant Design Pro组件 function App() { return ( <Layout> {/* 根据需求选择BasicLayout或其他布局 */} <BasicLayout /> </Layout> ); } export default App; ``` 6. **启动项目**: 重启项目服务,运行`npm run dev` 或 `yarn dev`,然后你就可以看到基于Ant Design Pro的UmiJS应用了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值