從0到1-UMI快速上手(1)
開發環境搭建
開發環境
UMI在Windows, Mac和Linux的表現都是一致的。你只需要在電腦上安裝Node.js環境。
為了便於開發,你還需要一個文字編輯器來編寫程式碼,可能你的電腦上已經安裝了其他的文字編輯器,但這裡我還是推薦使用VisualStudio Code。因為後續我們會使用配套的VisualStudio Code外掛來提升開發效率,並且它還自帶了一個命令列執行指令碼。
第一步 安裝Node.js
安裝Node還是挺簡單的,只需要到 官網 下載使用與自己系統的版本就可以了。
所有的安裝都是“下一步”,就可以了。
如果你已經安裝過Node,那麼你可以跳過前一步。
接下來在終端/控制檯視窗中執行命令node -v,來驗證一下你正在執行 node 8.1x以上的版本
>node -v v8.10.1
如果終端成功打印出node的版本號,就可以進入下一步了。
第二步 安裝VisualStudio Code
還是 官網 下載,全部下一步。
使用umi
第一步 安裝Umi
我們需要使用Umi來建立頁面(umi g),並執行多種開發任務,比如測試(umi test)、打包(umi build)和開發(umi dev)等。
全域性安裝 Umi。
使用 npm 來安裝Umi,請開啟終端/控制檯視窗,並輸入下列命令:
npm install -g umi
推薦使用 yarn 來安裝Umi,因為yarn對於多次執行安裝的情況做了快取,這個在我們前期,經常新建專案的時候,能夠節省很多時間。
npm install -g yarn
命令列執行結束後,判斷yarn是否安裝成功
yarn -v 1.12.3
使用yarn安裝Umi
yarn global add umi
命令列執行結束後,判斷yarn是否安裝成功
umi -v 2.3.2
第二步 安裝 create-umi
yarn global add create-umi ... success Installed "[email protected]" with binaries: - create-umi :sparkles:Done in 36.07s
create-umi主要是用來使用命令列建立umi相關的庫或者專案。命令中列印success,應該就安裝成功了,如果你還需要進一步確認,可以通過執行create-umi -v來列印create-umi的版本號。
第三步 使用create-umi新建專案
注意:第一個選項先選擇project。這裡的system指的是專案名,你可以輸入任意的名字。
create-umi system ? Select the boilerplate type (Use arrow keys) ❯ project ant-design-pro plugin block ? What functionality do you want to enable? ◉ antd ❯◉ dva ◯ code splitting ◯ dll ◯ hard source
create-umi提供的定製化能力,你可以通過空格鍵來選中你需要的功能,然後通過敲擊回車鍵,來確認開始建立專案。這裡我們選中antd和dva就好。
? What functionality do you want to enable? antd, dva create package.json create mock/.gitkeep create src/assets/yay.jpg create src/layouts/index.css create src/layouts/index.js create src/pages/index.css create src/pages/index.js create src/global.css create .gitignore create .editorconfig create .env create .umirc.js create .eslintrc create .prettierrc create .prettierignore create src/models/.gitkeep create src/app.js :clipboard:Copied to clipboard, just use Ctrl+V :sparkles:File Generate Done
如果你的命令列列印的日誌如上,那就說明你新建專案完成了,如果有其他的錯誤,可以確認一下,當前目錄下是否存在system資料夾。注意create-umi會自動幫你新建system資料夾,所以你可以稍微注意一下。
切換到專案目錄,安裝依賴
cdsystem yarn ...這個過程需要一點時間 success Saved lockfile. :sparkles:Done in 170.43s.
看到命令列列印success,一般就是安裝成功了,但是有時候因為一些網路問題,會出現丟包的情況。所以我們繼續驗證。
啟動開發伺服器
yarn start yarn run v1.12.3 $ umi dev ✔ Webpack Compiled successfully in 5.28s Starting the development server... DONECompiled successfully in 5289ms14:44:47 App running at: - Local:http://localhost:8000/ (copied to clipboard) - Network: http://192.168.124.10:8000/
列印如上日誌,說明專案初始化成功了。你可以通過瀏覽器訪問 http://localhost :8000/來訪問頁面。
第四步 專案結構
. ├── mock ├── package.json ├── src │├── app.js │├── assets ││└── yay.jpg │├── global.css │├── layouts ││├── index.css ││└── index.js │├── models │└── pages │├── index.css │└── index.js ├── .env └── .umirc.js
這裡是我們當前專案的目錄結構,使用create-umi建立的專案,是一個典型的umi專案結構,我們可以在umi約定使用的目錄中,新增我們所需要的內容,達到快速實現功能需求的目的。
./mock/
約定 mock 目錄裡所有的 .js 檔案會被解析為 mock 檔案。
比如,新建 mock/users.js,內容如下:
export default { '/api/users': ['a', 'b'], }
然後在瀏覽器裡訪問 http://localhost :8000/api/users 就可以看到 ['a', 'b'] 了。
使用了mock.js後你在也不用苦苦的等後端開發完成介面了
./src/
我們約定了將專案的所有原始碼放在src目錄裡面,umi專案的大部分的工作都將在這裡進行。當我們執行 umi dev 或者umi build 時,我們的程式碼會被轉換成瀏覽器能夠執行的正確的JavaScript版本,所以我們可以在這裡使用TypeScript或者其他JavaScript新語法。
./src/layouts/index.js
約定式的全域性佈局,實際上是在路由外面套了一層。
比如,你的路由是:
[ { path: '/', component: './pages/index' }, { path: '/users', component: './pages/users' }, ]
如果有 layouts/index.js,那麼路由則變為:
[ { path: '/', component: './layouts/index', routes: [ { path: '/', component: './pages/index' }, { path: '/users', component: './pages/users' }, ] } ]
從元件角度可以簡單的理解為如下關係:
<layout> <page>1</page> <page>2</page> </layout>
./src/pages/
約定 pages 下所有的 (j|t)sx? 檔案即路由。在umi中可以使用約定式路由和配置式路由,在實際專案開發中,我個人偏向於使用,約定式路由。畢竟這是umi的主要特性之一。使用約定式路由,意味著不需要維護,可怕的路由配置檔案。最常用的有基礎路由和動態路由(用於詳情頁等,需要從url取引數的情況)
基礎路由
假設 pages 目錄結構如下
+ pages/ + users/ - index.js - list.js - index.js
那麼,umi 會自動生成路由配置如下:
[ { path: '/', component: './pages/index.js' }, { path: '/users/', component: './pages/users/index.js' }, { path: '/users/list', component: './pages/users/list.js' }, ]
動態路由
umi 里約定,帶 $ 字首的目錄或檔案為動態路由。
比如以下目錄結構:
+ pages/ + $post/ - index.js - comments.js + users/ $id.js - index.js
會生成路由配置如下:
[ { path: '/', component: './pages/index.js' }, { path: '/users/:id', component: './pages/users/$id.js' }, { path: '/:post/', component: './pages/$post/index.js' }, { path: '/:post/comments', component: './pages/$post/comments.js' }, ]
./src/pages/404.js
當訪問的路由地址不存在時,會自動顯示404 頁面。只有build之後生效。除錯的時候可以訪問 /404 。
./src/pages/document.ejs
有這個檔案時,會覆蓋預設的 HTML 模板。需至少包含以下程式碼,
<div id="root"></div>
常用於需要設定網站名稱,增加meta,增加頭部js
./src/pages/.umi/
這是 umi dev 時生產的臨時目錄,預設包含 umi.js 和 router.js,有些外掛也會在這裡生成一些其他臨時檔案。可以在這裡做一些驗證,但請不要直接在這裡修改程式碼,umi 重啟或者 pages 下的檔案修改都會重新生成這個資料夾下的檔案。
./src/pages/.umi-production/
同 src/pagers/.umi,但是是在 umi build 時生成的,會在 umi build 執行完自動刪除。
檔名字尾.test.js 和 .e2e.js
測試檔案,umi test 會查詢所有的 .(test|e2e).(j|t)s 檔案跑測試。
./src/global.(j|t)sx?
在入口檔案最前面被自動引入,可以考慮在此加入 polyfill。umi區別於其他前端框架,沒有顯示的程式主入口,如src/app.js或src/index.js,所以在引用某些模組的時候,如果模組功能要求在程式主入口新增程式碼時,你就可以寫到這個檔案。
./src/global.(css|less|sass|scss)
這個檔案不走 css modules,自動被引入,可以寫一些全域性樣式,或者做一些樣式覆蓋。
.umirc.js 和 ./config/config.js
umi 的配置檔案,二選一。當兩者同時存在時,優先使用.umirc.js。
.env
環境變數,比如
BROWSER=none
準備工作就是這些,接下來就是實際開發了