从零开始搭建antd design pro项目

淩亂°似流年 2023-05-29 05:21 35阅读 0赞

> 本文介绍 如何重零开始搭建 基于react的antd design pro项目。从多零开始呢？重刚装好操作系统开始。  
> react是三大前端框架，antd design是蚂蚁金服开发在中端应用框架，这篇文章将使用umi.js来搭建上述系统。

### 重要用官方URL ###

1.  [umi.js 官方手册][umi.js]
2.  [antd design pro 官方手册][antd design pro]
3.  [antd design pro 预览路径][antd design pro 1]
4.  [antd design pro 官方github][antd design pro _github]

### 安装基本环境 ###

1、安装node.js(自带npm)  
2、安装yarn，antd官方推荐使用yarn 管理依赖  
3、安装umi.js，umi是一个开箱即用的工具，可大大简化开发过程

### 环境搭建的坑 ###

问题：创建ant design pro时，报错  
window下的环境版本如下:

$ node -v
    v8.0.11.3
    
    $ npm -v
    v5.3.0
    
    $ umi -v
    v2.0.3
    
    $ yarn -v
    v1.5.1

#### 创建过程如下 ####

`$ tyarn create umi`  
选择 antd design pro  
选择 javascript

然后报如下错

error An unexpected error occurred: "Command failed.
    Exit code: 1
    Command: C:\\Users\\Administrator\\AppData\\Local\\Yarn\\bin\\create-umi
    Arguments:
    Directory: F:\\bing_work\\code_projects\\test
    Output:
    ".
    info If you think this is a bug, please open a bug report with the information p
    rovided in "C:\\Users\\Administrator\\AppData\\Local\\Yarn\\Data\\global\\yarn-e
    rror.log".
    info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this c
    ommand.

直接打开目录，发现已经git 下来了，于是  
执行`$ tyarn` 安装依赖，报如下错（直接手动到 github下载，还是一样的错）

$ tyarn
    yarn install v1.5.1
    info No lockfile found.
    [1/5] Validating package.json...
    error ant-design-pro@4.0.0: The engine "node" is incompatible with this module. Expected version ">=10.0.0".
    error An unexpected error occurred: "Found incompatible module".
    info If you think this is a bug, please open a bug report with the information provided in "F:\\bing_work\\code_projects\\ant-design-pro\\yarn-error.log".
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

根据提示，说是node版本太底了，需要v10以上的版本。  
重新去node官网下在12版本，安装后，再次执行`tyarn create umi`

$ node -v
    v12.0.0
    $ tyarn create umi

还是报错`Command: C:\\Users\\Administrator\\AppData\\Local\\Yarn\\bin\\create-umi`  
但是，直接github下载的目录中，执行`$ tyarn` 安装依赖时，没有报node>10.0.0的错。  
同时，直接进入yarn create umi的项目目录，也是发现已经下载好了git版本。于是也执行`$ tyarn` 也是可以正常执行。

那到底是什么原因呢？未知~

[umi.js]: https://umijs.org/zh/
[antd design pro]: https://pro.ant.design/docs/getting-started-cn
[antd design pro 1]: https://preview.pro.ant.design/dashboard/analysis
[antd design pro _github]: https://github.com/ant-design/ant-design-pro/blob/master/README.zh-CN.md