Ant Design Pro v4　最新版安裝（跳過所有坑）

原創 靖翼 最后發布於2019-06-28 21:26:46 閱讀數 5335 收藏

發布於2019-06-28 21:26:46

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接： https://blog.csdn.net/weixin_44736274/article/details/94043862

展開

先上一些官方的話

Ant Design Pro 是一個企業級中后台前端/設計解決方案，我們秉承 Ant Design 的設計價值觀，致力於在設計規范和基礎組件的基礎上，繼續向上構建，提煉出典型模板/業務組件/配套設計資源，進一步提升企業級中后台產品設計研發過程中的『用戶』和『設計者』的體驗。隨着『設計者』的不斷反饋，我們將持續迭代，逐步沉淀和總結出更多設計模式和相應的代碼實現，闡述中后台產品模板/組件/業務場景的最佳實踐，也十分期待你的參與和共建。

現在開始安裝以及初步運行（Linux下）

安裝前需要的環境： yarn、 node 和 git，推薦配置cnpm

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

 

安裝大概有三種方法(本地運行)：
1、 git clone（穩定，速度偏慢）
直接在github下clone下來

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

 

２、ant-design-pro-cli（推薦）

npm install ant-design-pro-cli -g
mkdir pro-demo && cd pro-demo
pro new

 

３、官網的方法（強烈推薦，又快又穩）
①新建個文件夾，在文件夾里執行

yarn create umi

 

或者是

npm create umi

 

②選擇 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.

 

③再選擇typeScript

? Which language do you want to use? (Use arrow keys)
❯ TypeScript 
  JavaScript

 

④執行

npm install
npm start

 

無論以上哪種方法，都是需要通過打開瀏覽器訪問 http://localhost:8000才能看到如下效果:

在網上瀏覽其他相關博客他們給出的基本都是下圖：

那么，本文的重點來了，如何得到這樣的頁面呢？其實很簡單，加上npm run fetch:blocks這句代碼，重新運行即可。
如果覺得上圖內容太多，或者是有些是無用的，也可以采用單個頁面下載（區塊）的方法（預覽頁面）：

點擊下載標識，復制，在項目下運行代碼即可（注意，由於權限問題，可能導致失敗）
以上就是安裝且本地運行的所有內容了，如果想用idea或者是ws運行的朋友，將項目用open打開，在軟件的上的plugins下載上述環境，在terminal上運行npm install 和npm start 即可

• 點贊 1
• 收藏
• 分享
• • 文章舉報

靖翼

發布了30 篇原創文章 · 獲贊 6 · 訪問量 1萬+

私信 關注