從零開始搭建antd design pro項目

本文介紹 如何重零開始搭建 基于react的antd design pro項目。從多零開始呢？重剛裝好作業系統開始。

react是三大前端架構，antd design是螞蟻金服開發在中端應用架構，這篇文章将使用umi.js來搭建上述系統。

重要用官方URL

1. umi.js 官方手冊
2. antd design pro 官方手冊
3. antd design pro 預覽路徑
4. 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 [email protected]: 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

也是可以正常執行。

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