我們依然選擇使用UmiJS作為建構工具。
建立工程：
輸入指令，進行初始化：
初始化完成：
在指令輸入如下指令：
可以看到，相關的依賴已經導入進來了
第一步，在工程的根目錄下建立config目錄，在config目錄下建立config.js檔案。
在UmiJS的約定中，config/config.js将作為UmiJS的全局配置檔案。
在umi中，約定的目錄結構如下：
在config.js檔案中輸入以下記憶體，以便後面使用：
第二步，建立HelloWorld.js頁面檔案
在umi中，約定存放頁面代碼的檔案夾是在src/pages，可以通過singular:false來設定單數的命名方式，我們采用默 認即可。
在HelloWorld.js檔案中輸入如下内容：
在這裡，可以會比較奇怪，怎麼可以在js檔案中寫html代碼，其實，這是react自創的寫法，叫JSX，後面我們再細一一說。
第三步，啟動服務檢視頁面效果
可以看到，通過/HelloWorld路徑即可通路到剛剛寫的HelloWorld.js檔案。
在 umi 中，可以使用約定式的路由，在 pages 下面的 JS 檔案都會按照檔案名映射到一個路由，比如上面這個例子， 通路 /helloworld 會對應到 HelloWorld.js。
當然了，也可以自定義路由，具體的路由配置在後面講解。
umi-plugin-react插件是umi官方基于react封裝的插件，包含了13個常用的進階功能。 具體可檢視：https://umijs.org/zh/plugin/umi-plugin-react.html
添加成功：
接下來，在config.js檔案中引入該插件：
現在我們寫的js，必須通過umi先轉碼後才能正常的執行，那麼我們最終要釋出的項目是普通的html、js、css，那麼應該怎麼操作呢？
其實，通過umi是可以進行轉碼生成檔案的，具體操作如下：
可以看到，已經生成了index.html和umi.js檔案。我們打開umi.js檔案看看。
首先，看到的是umi.js檔案是一個已經壓縮過的檔案，然後搜尋“hello world”，可以找到，我們剛剛寫的代碼已經被轉碼了。
至此，開發環境搭建完畢。