從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 "create-umi@0.7.0" with binaries:
      - create-umi
✨  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
📋  Copied to clipboard, just use Ctrl+V
✨  File Generate Done
複製代碼

若是你的命令行打印的日誌如上，那就說明你新建項目完成了，若是有其餘的錯誤，能夠確認一下，當前目錄下是否存在system文件夾。注意create-umi會自動幫你新建system文件夾，因此你能夠稍微注意一下。

切換到項目目錄，安裝依賴

cd  system
yarn
...這個過程須要一點時間
success Saved lockfile.
✨  Done in 170.43s.
複製代碼

看到命令行打印success，通常就是安裝成功了，可是有時候由於一些網絡問題，會出現丟包的狀況。因此咱們繼續驗證。

啓動開發服務器

yarn start
yarn run v1.12.3
$ umi dev

✔ Webpack
  Compiled successfully in 5.28s

Starting the development server...

 DONE  Compiled successfully in 5289ms                                                                                  14: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
複製代碼

準備工做就是這些，接下來就是實際開發了