懒人福音（UmiUi）开箱！

前端时间云谦大佬发布了UmiUi一期相对来说功能并不是很多，更多的像是搭一个架子，最近二期也来了，写篇文章感受一下；

简要的放一些UmiUi一期相关的资料吧！
视频教程是B站的云谦本人录制的一端视频。

UmiUi二期 添加了区块和模板、Mini 气泡、编译态同步、build 和 dev 分析等功能

安装

闲言少叙，直接进入主题，先安装；

有一个视频版本在油管上，要翻墙才能看，好尴尬；

首先要保证Node.js的版本在8.10.0以上 如果版本过低建议升级；

根这UmiJS提示操作就好：

查看node版本

$ node -v
v10.16.0 // 我的版本好久没更新过了

全局安装umi

$ yarn global add umi
$ umi -v
2.10.7

插一句，到这里有可能有些人会报错'umi' 不是内部或外部命令，也不是可运行的程序 或批处理文件或umi: command not found;

原因是没有配置环境变量；

这里说下解决方案：

获取全局bin路径

# mac 系统
$ sudo vi ~/.bash_profile
# 在.bash_profile 中添加下面一行代码：
export PATH="$PATH:`yarn global bin`"

# window系统
$ yarn global bin
C:\Users\machinist\AppData\Local\Yarn\bin
# 复制上边的 global bin 路径，添加到系统环境变量PATH中

注意window系统的路径需要以\结尾，所以赋值的应该是:
C:\Users\machinist\AppData\Local\Yarn\bin\

样板

安装完成以后，就可以直接操作了。

首先创建一个空目录，（我本来就在空目录下打开的好伐）。

然后使用创建一些页面umi g。

$ umi g page index
$ umi g page users
umi g page  component

umi g是的别名umi generate，用于产生component，page，layout迅速。并且可以在插件中扩展它，例如umi-plugin-dva extended dva:model，然后可以通过生成dva的模型umi g dva:model foo。

创建完的目录就是这样子的：

红框里面的是umi dev之后的自动生成的；

$ umi dev

浏览器中看到页面了（不忍直视啊，真是的丑，难看，ugly，磕碜），之后添加路由我们就可以是实现跳转了；

index页面

users页面

之后就可以进行简单的开发了。

这么看确实很简单，拿过来就直接用就可以了，Ant Design Pro V4 也搭载了最新的UmiUi二期看一下 具体还有那些不一样；

Ant Design Pro V4

Ant Design Pro官网直接点击stargithug，克隆一份代码下来；

$ git init
$ git clone https://github.com/ant-design/ant-design-pro.git

Ant Design Pro 项目的目录以及应用我就不介绍了，还不知道的就百度下吧。在多说就没有意思了。

克隆以后，安装依赖，启动项目。

点开配置tab，里面有关于热更新、dva、路由以及静态数据的相关的配置，可以不在配置webpack；

在任务中我们可以选择构建项目、重装依赖、代码风格检查以及项目测试。

做一个简单的测试，修改一下浏览器兼容性的配置，从IE11改到IE9，看看项目中的配置文件是否会相应的修改；

修改前：

项目目录中依旧保留了原有的webpack的config文件(都是用ts编写的)，说明我们还是可以自行配置自己想要的东西；

修改后：

对比修改前与修改后我们可以看到在配置中心修改配合后，相应的配置会以代码的形式注入到webpack的config文件中；
值得注意的是保存配置的过程会中断项目的运行，保存成功以后项目会自动启动；

在资产中UmiUi为我们准备了Ant Design 的组件模块供我们使用；

随便添加了一个表格看下效果

代码会保存在page下我们设置的路径下，供我们使用修改；

结束语

差不多就是这样吧，就介绍这么多，剩下的就等待使用的时候摸索了，个人觉得还是挺方便的，省去了配置的问题；

不过也有也有一个问题值得我们深思，过分集成、封装到底好不好，一直觉得过分的封装虽然可以简化使用难度，但是也是一些人丧失了对原理的追求，打个比方我之前一个同事dva用的非常6，但是redux原理都不知道，项目里面明明有redux，为了迁就她还要在注入一个dva；

我个人还是倾向于写更多的代码，更贴近原生，不是说集成封装不好，只是觉得太不灵活；当然这也只是我个人的一点看法，你们觉得呢？