1. 程式人生 > 實用技巧 >使用create-react-app 搭建一個專案,並引入antd

使用create-react-app 搭建一個專案,並引入antd

使用create-react-app 搭建一個專案,並引入antd

1、我已經安裝了node和npm,檢視版本用node -v和npm -v

2、安裝腳手架npm install -g create-react-app

在這裡插入圖片描述

3、開啟自己想放專案的路徑,比如我想放進一個app裡面,在路徑上面輸入cmd,回車

在這裡插入圖片描述

4、使用腳手架快速構建一個專案,在命令列輸入create-react-app myproject,裡面的myproject是自己取的專案名

在這裡插入圖片描述

5、專案構建成功後,開啟專案資料夾,路徑上cmd回車,命令列輸入npm start

6、呃……版本相容問題,根據提示,建立一個.env檔案,並放入SKIP_PREFLIGHT_CHECK=true規避,為了方便編輯,這裡用VSCode新增檔案了,直接把生成的專案拖進VSCode

在這裡插入圖片描述
在這裡插入圖片描述

7、再跑一次npm start,成功了

在這裡插入圖片描述

8、接著安裝引入並安裝antd,yarn add antd 或者npm install antd --save

在這裡插入圖片描述

9、使用的時候引入元件,如引入按鈕:import {Button} from ‘antd’,引入樣式@import ‘~antd/dist/antd.css’;

官網使用教程:連結: https://ant.design/docs/react/use-with-create-react-app-cn.