Ant Design Pro 安装各种坑

在安装Ant Design Pro过程中遇到了一些坑,包括在node13.0.1环境下clipboardy报错,解决方法是降级到node12.16.3和npm6.14;npm install时出现locale错误,尝试了更新moment、修改package.json的resolutions以及禁用国际化配置,最终通过忽略locale启动成功。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.安装antdpro时,clipboardy' do not define a '.' subpath,(node13.0.1 npm6.5)解决方法:uninstall and install 12.16.3 长期支持版  (node12.16.3 npm 6.14) 环境OK

2.npm install -g umi 

3.npm install -g yarn

4.npm install

5.npm run start 出locale 出错,网上各种方法,什么moment, npm uninstall moment
    npm install moment@2.24.0,然后使用 npm start,失败。如果无效进行第三步
    在package.json新增 如下代码:

 "resolutions": {
    "moment": "2.24.0"
  }, 上述失败,又搞 暴露 yarn eject 出错,没法暴露

6.没有办法,一怒之下,locale 禁用,什么国际化,老外还会用这玩意,去你大爷的

config.js

 define: {
    REACT_APP_ENV: REACT_APP_ENV || false,
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION:
      ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION || '', // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环

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应用了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值