从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
复制代码

准备工做就是这些，接下来就是实际开发了