运行antd pro v4

1、安装yarn

curl -o- -L https://yarnpkg.com/install.sh | bash

 

出现了提示信息:

> WARNING: GPG is not installed, integrity can not be verified!

> Extracting to ~/.yarn...

> Adding to $PATH...

> Profile not found. Tried  (as defined in $PROFILE), ~/.bashrc, ~/.bash_profile, ~/.zshrc, and ~/.profile.

> Create one of them and run this script again

> Create it (touch ) and run this script again

   OR

> Append the following lines to the correct file yourself:

 

export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

 

将最后一行,放到命令行即可。

2、yarn create umi my-app

  cd my-app

3、yarn

warning Error running install script for optional dependency: "/Users/songya/antdpro/my-app/node_modules/puppeteer: Command failed.

Exit code: 1

Command: node install.js

Arguments: 

Directory: /Users/songya/antdpro/my-app/node_modules/puppeteer

Output:

ERROR: Failed to download Chromium r669486! Set \"PUPPETEER_SKIP_CHROMIUM_DOWNLOAD\" env variable to skip download.

{ Error: read ETIMEDOUT

    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)

  -- ASYNC --

    at BrowserFetcher.<anonymous> (/Users/songya/antdpro/my-app/node_modules/puppeteer/lib/helper.js:111:15)

    at Object.<anonymous> (/Users/songya/antdpro/my-app/node_modules/puppeteer/install.js:64:16)

    at Module._compile (internal/modules/cjs/loader.js:707:30)

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)

    at Module.load (internal/modules/cjs/loader.js:605:32)

    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)

    at Function.Module._load (internal/modules/cjs/loader.js:536:3)

报错:ERROR: Failed to download Chromium r669486! Set \"PUPPETEER_SKIP_CHROMIUM_DOWNLOAD\" env variable to skip download.

解决方法:npm install -g cnpm --registry=https://registry.npm.taobao.org

     cnpm i puppeteer

4、yarn start

  error     Error: Cannot find module 'react' 

 

解决方法:yarn add react

 

 

 

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

 

 

解决方法:rm package-lock.json

5、yarn start

App running at:

  - Local:   http://localhost:8000/ (copied to clipboard)

  - Network: http://10.28.175.13:8000/

转载于:https://www.cnblogs.com/songya/p/11072493.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Pro v4 是一个基于 Ant Design 设计语言的企业级中后台前端/设计解决方案,其中包含了一些用于数据模拟的 mock 功能。在 Pro v4 中,mock 数据是通过 umi-request 库来实现的。 要在 Ant Design Pro v4 中使用 mock 功能,你可以按照以下步骤进行操作: 1. 在 `src` 目录下创建一个名为 `mock` 的文件夹。 2. 在 `mock` 文件夹中创建一个名为 `api.ts` 的文件,用于编写接口的 mock 数据。 3. 在 `api.ts` 文件中,你可以使用 umi-request 提供的 `extend` 方法来创建一个请求实例,并通过 `mock` 方法来定义接口的 mock 数据。例如: ```typescript import { extend } from 'umi-request'; const request = extend({ prefix: '/api', timeout: 1000, }); export default { 'GET /api/user': { id: 1, name: 'John Doe', }, 'POST /api/login': (req, res) => { const { username, password } = req.body; if (username === 'admin' && password === '123456') { res.send({ status: 'ok', message: 'Login successful!', }); } else { res.send({ status: 'error', message: 'Invalid username or password!', }); } }, 'PUT /api/user/:id': (req, res) => { const { id } = req.params; const { name } = req.body; res.send({ id, name, }); }, }; ``` 在上面的例子中,我们定义了三个接口的 mock 数据:`GET /api/user`、`POST /api/login` 和 `PUT /api/user/:id`。 4. 在 `src` 目录下的 `models` 文件夹中创建一个名为 `mock.ts` 的文件,并在该文件中导入 `api.ts` 中定义的 mock 数据。例如: ```typescript import api from '@/mock/api'; const enableMock = true; // 是否开启 mock 功能 if (enableMock) { Object.keys(api).forEach((key) => { const [method, path] = key.split(' '); const [mockMethod, mockPath] = method.split('_'); if (mockMethod && mockPath) { umiMocker(mockMethod.toUpperCase(), mockPath, api[key]); } }); } ``` 在上面的例子中,我们通过遍历 `api.ts` 中定义的 mock 数据,并使用 `umiMocker` 方法来注册 mock 接口。 5. 在 `src/app.tsx` 文件中,将 `import './mock';` 添加到文件开头,以确保 mock 数据在应用启动时被加载。例如: ```typescript import './mock'; ``` 完成以上步骤后,当你在开发环境下运行 Ant Design Pro v4 时,接口请求将会被拦截并返回 mock 数据。 请注意,以上只是一个简单的示例,你可以根据自己的需求来编写更复杂的 mock 数据。另外,需要注意的是,在生产环境下是不会启用 mock 功能的,mock 数据只会在开发环境中生效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值