這篇文章主要為大家展示了“怎么安裝Ant Design Pro”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么安裝Ant Design Pro”這篇文章吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了牟平免費(fèi)建站歡迎大家使用！

1、什么是Ant Design Pro

Ant Design Pro 是一個(gè)企業(yè)級(jí)中后臺(tái)前端/設(shè)計(jì)解決方案，我們秉承 Ant Design 的設(shè)計(jì)價(jià)值觀，致力于在設(shè)計(jì)規(guī)范和基礎(chǔ)組件的基礎(chǔ)上，繼續(xù)向上構(gòu)建，提煉出典型模板/業(yè)務(wù)組件/配套設(shè)計(jì)資源，進(jìn)一步提升企業(yè)級(jí)中后臺(tái)產(chǎn)品設(shè)計(jì)研發(fā)過程中的『用戶』和『設(shè)計(jì)者』的體驗(yàn)
     本地需要安裝yarn(or npm)、node 和 git。我們的技術(shù)?；?ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和學(xué)習(xí)這些知識(shí)會(huì)非常有幫助。

2、安裝

準(zhǔn)備的環(huán)境

• node js好像是10.13及以上

  我的node js用的版本是12.14.0

• npm服務(wù)器在國外，訪問比較慢，可以更換成國內(nèi)源：

npm config set registry https://registry.npm.taobao.org

也可以安裝cnpm（采用的國內(nèi)源），使用時(shí)需要npm命令的地方都換成cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

方法一：git 安裝

git clone https://github.com/ant-design/ant-design-pro.git
cd　ant-design-pro
npm install
npm start

方法二：官網(wǎng)推薦的方法

新建一個(gè)空文件夾作為項(xiàng)目目錄，并在目錄下執(zhí)行：

yarn create umi

or

npm create umi

然后等待安裝依賴，完畢后會(huì)提示選擇模板，我們選擇第一個(gè) ant-design-pro：

Select the boilerplate type (Use arrow keys)
? ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

選擇模板后，會(huì)彈出選擇版本，我們選擇v5（v5默認(rèn)是typescript版本，也是antd pro的最新開發(fā)模式，v4可以選擇javascript/typescript兩種版本，如果不想用typescript方式，可以選擇v4，然后再選擇javascript即可。還會(huì)叫我們選擇simple和complete版

Ant Design Pro 腳手架將會(huì)自動(dòng)安裝。

安裝完成后已經(jīng)為你生成了一個(gè)完整的開發(fā)框架，提供了涵蓋中后臺(tái)開發(fā)的各類功能和坑位，如果我們選擇是的simple版，下面是整個(gè)項(xiàng)目的目錄結(jié)構(gòu)。

├── config                   # umi 配置，包含路由，構(gòu)建等配置
├── mock                     # 本地模擬數(shù)據(jù)
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地靜態(tài)資源
│   ├── components           # 業(yè)務(wù)通用組件
│   ├── e2e                  # 集成測試用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 業(yè)務(wù)頁面入口和常用模板
│   ├── services             # 后臺(tái)接口服務(wù)
│   ├── utils                # 工具庫
│   ├── locales              # 國際化資源
│   ├── global.less          # 全局樣式
│   └── global.ts            # 全局 JS
├── tests                    # 測試工具
├── README.md
└── package.json

然后開始安裝依賴并啟動(dòng)項(xiàng)目,執(zhí)行以下命令

npm install
npm start

如果重試幾次還報(bào)錯(cuò)，可以考慮換cnpm試試

cnpm install
cnpm start

等待webpack building完成

啟動(dòng)完成后會(huì)自動(dòng)打開瀏覽器訪問 http://localhost:8000，你看到下面的頁面就代表成功了。

其實(shí)很簡單，在啟動(dòng)的時(shí)候，我們加個(gè)參數(shù) fetch:blocks ，會(huì)自動(dòng)安裝完整的組件到我們的代碼中

cnpm run fetch:blocks

如果我們選擇的是完整版complete的版本
目錄結(jié)構(gòu)就是這樣的

── config                   # umi 配置，包含路由，構(gòu)建等配置
├── mock                     # 本地模擬數(shù)據(jù)
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地靜態(tài)資源
│   ├── components           # 業(yè)務(wù)通用組件
│   ├── e2e                  # 集成測試用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 業(yè)務(wù)頁面入口和常用模板
│   ├── services             # 后臺(tái)接口服務(wù)，請求服務(wù)端接口的都放在這里
│   ├── utils                # 工具庫
│   ├── locales              # 國際化資源
│   ├── global.less          # 全局樣式
│   └── global.ts            # 全局 JS
├── tests                    # 測試工具
├── README.md
└── package.json

內(nèi)置模板如下：

- Dashboard
  - 分析頁
  - 監(jiān)控頁
  - 工作臺(tái)
- 表單頁
  - 基礎(chǔ)表單頁
  - 分步表單頁
  - 高級(jí)表單頁
- 列表頁
  - 查詢表格
  - 標(biāo)準(zhǔn)列表
  - 卡片列表
  - 搜索列表（項(xiàng)目/應(yīng)用/文章）
- 詳情頁
  - 基礎(chǔ)詳情頁
  - 高級(jí)詳情頁
- 結(jié)果
  - 成功頁
  - 失敗頁
- 異常
  - 403 無權(quán)限
  - 404 找不到
  - 500 服務(wù)器出錯(cuò)
- 個(gè)人頁
  - 個(gè)人中心
  - 個(gè)人設(shè)置
- 圖形編輯器
  - 流程圖編輯器
  - 腦圖編輯器
  - 拓?fù)渚庉嬈?
- 帳戶
  - 登錄
  - 注冊
  - 注冊成功

頁面大概就是這樣的

以上是“怎么安裝Ant Design Pro”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：怎么安裝AntDesignPro
本文來源：http://chinadenli.net/article30/iegoso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、全網(wǎng)營銷推廣、小程序開發(fā)、做網(wǎng)站、Google、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)