Node.js

按照官網步驟裝好node.js，同時會安裝上npm，另外再安裝上yarn

使用create-react-app安裝react

cd antd-demo

Yarn start

自動彈出localhost:3000

安裝並引入antd

修改 src/App.js，引入 antd 的按鈕元件。（line 2）

修改src/App.css，在檔案頂部引入 antd/dist/antd.css

頁面顯示：

然後就可以繼續選用其他元件開發應用了。

高階配置（對上述內容進行優化）

安裝craco

修改package.json 裡的 scripts 屬性

然後在專案根目錄建立一個 craco.config.js

自定義主題

按照 配置主題的要求，自定義主題需要用到類似 less-loader 提供的 less 變數覆蓋功能。我們可以引入 craco-less 來幫助載入 less 樣式和修改變數。

首先把 src/App.css 檔案修改為 src/App.less，然後修改樣式引用為 less 檔案。

然後安裝 craco-less 並修改 craco.config.js 檔案如下

這裡利用了 less-loader 的 modifyVars 來進行主題配置，變數和其他配置方式可以參考 配置主題 文件。修改後重啟 yarn start，如果看到一個綠色的按鈕就說明配置成功了

原理上是使用 less 提供的 modifyVars 的方式進行覆蓋變數.