Ant Design Pro安裝學習

Ant Design Pro學習

Ant Design Pro 官網：https://pro.ant.design/index-cn

開箱即用的中台前端/設計解決方案

基於 React 的中后台管理控制台的腳手架，UI是Ant Design，，框架是 Ant Design Pro

安裝前，你的本地環境需要安裝 yarn、node 和 git

 

一、前序准備

windows下yarn安裝

yarn中文文檔：https://yarn.bootcss.com/docs

1、使用安裝包安裝（可以自行選擇路徑）

　  官方下載.msi安裝包：https://yarn.bootcss.com/docs/install/#windows-stable

      安裝完畢后，一定要設置環境變量　　

2、使用npm 安裝（全局安裝）

npm i yarn -g

-i：install 

-g：全局安裝（global）,使用 -g 或 --global

     ps：可以使用 yarn -v 檢測是由安裝成功，也可以直接輸入 yarn 查看安裝yarn的信息

     

二、安裝

1、新建一個空的文件夾作為項目目錄，並在目錄下執行：

yarn create umi

or

npm create umi

2、選擇  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.

Ant Design Pro 腳手架將會自動安裝。

三、本地開發

1、安裝依賴

npm install

2、嘗試運行

npm start

　運行成功后，會出現地址，可以在瀏覽器中訪問

   

　運行效果如下；

   

 ps：如果遇到了“運行 create-umi 報錯“文件名、目錄名或卷標語法不正確”的問題，可以參考 https://www.cnblogs.com/xyann/p/12733803.html