1. 程式人生 > >umi搭建react+antd專案(一)環境配置

umi搭建react+antd專案(一)環境配置

1.先建立資料夾,windows使用者手動建立就行了

mkdir myReact && cd myReact

2.在myReact目下,執行腳手架命令,預設選擇antd

yarn create umi

建立專案成功:


3.輸入yarn安裝node模組

4.執行專案:yarn start

5.訪問http://localhost:8000/

6目錄介紹

.
├── dist/                          // 預設的 build 輸出目錄
├── mock/                          // mock 檔案所在目錄,基於 express
├── config/
    ├── config.js                  // umi 配置,同 .umirc.js,二選一
└── src/                           // 原始碼目錄,可選
    ├── layouts/index.js           // 全域性佈局
    ├── pages/                     // 頁面目錄,裡面的檔案即路由
        ├── .umi/                  // dev 臨時目錄,需新增到 .gitignore
        ├── .umi-production/       // build 臨時目錄,會自動刪除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 頁面
        ├── page1.js               // 頁面 1,任意命名,匯出 react 元件
        ├── page1.test.js          // 用例檔案,umi test 會匹配所有 .test.js 和 .e2e.js 結尾的檔案
        └── page2.js               // 頁面 2,任意命名
    ├── global.css                 // 約定的全域性樣式檔案,自動引入,也可以用 global.less
    ├── global.js                  // 可以在這裡加入 polyfill
├── .umirc.js                      // umi 配置,同 config/config.js,二選一
├── .env                           // 環境變數
└── package.json