1. 程式人生 > 其它 >React+Umijs+AntDesign+Axios技術棧專案搭建

React+Umijs+AntDesign+Axios技術棧專案搭建

一、首先得有node,並確保 node 版本是 10.13 或以上。(mac 下推薦使用nvm來管理 node 版本)

檢視node

$ node -v
v10.13.0

二、推薦使用 yarn 管理 npm 依賴,並使用國內源(阿里使用者使用內網源)。(我選用的國內源,後面將以國內源舉例)

# 國內源
$ npm i yarn tyarn -g
# 後面文件裡的 yarn 換成 tyarn
$ tyarn -v

# 阿里內網源
$ tnpm i yarn @ali/yarn -g
# 後面文件裡的 yarn 換成 ayarn
$ ayarn -vs

三、新建一個資料夾(名字及專案名)

到這裡有兩種操作方式(如果你用的不是VSCode,建議用第一種,第二種我用的VSCode當然其它軟體也可以就等待你們自己發掘了(方法都是一樣的就是軟體有差異而已)):

  • 直接開啟資料夾:地址處輸入cmd用命令列建立專案
  • VSCode開啟資料夾(開啟終端,用命令列建立專案)

四、命令列建立專案

  • 通過官方工具建立專案(推薦tyarn)
$ tyarn create @umijs/umi-app
# 或 npx @umijs/create-umi-appa
  • 安裝依賴
$ tyarn
  • 到這裡就可以啟動專案了
$ tyarn start

  

http://localhost:8001瀏覽器開啟,可以看到這樣的頁面(到這裡專案基本完成!!)

五、安裝AntDesign

$ tyarn add antdl

六、安裝Axios

$ yarn add axios

七、結束(專案配置結束開始開發)

八、gitee獲取:https://gitee.com/zpf9/react-umijs-ant-design-axios.git

克隆下來直接命令列安裝依賴即可