Umi + ant Design Pro最简单的入门教程(一)初始

前言

umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。这个库入门的门槛比较高,umi是这个样子的,umi = react + redux + react-router + ts + dva + umi脚手架 + ant Design Pro + ant Design UI + umi-block。如果你没有丰富的react基础你来学习他或者是看懂它,那将是很困难的一件事,本博客则是尽量把用户当做小白进行入门,如果你依然觉得困难,那么抱歉本人只能做到这样了。轻喷...

这里是它的官网:https://umijs.org/zh/.

在开始之前,你一定要有react的基础,不然你来了只是白来,因为即使项目跑起来了,你也看不懂代码。我猜你需要这个:react入门-React + webpack 开发单页面应用

相关链接:
umi
ant-design-pro
ant-design-pro github
pro-blocks
umi-blocks

快速上手

环境准备

首先得有 node,并确保 node 版本是 8.10 或以上。(mac 下推荐使用 nvm 来管理 node 版本)

$ node -v
8.1x

使用 npm

其官网建议使用的是yarn,但是本人用的是npm,所以全程npm,你需要适应我。

npm -v

全局安装 umi,并确保版本是 2.0.0 或以上。

$ npm global add umi
$ umi -v
2.0.0

创建 umi 项目

首先,找个地方建个空目录

$ mkdir my-umi-app && cd my-umi-app

然后使用 npm create umi 脚手架,创建模板:

$ npm create umi
# Choose ant-design-pro:
 Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
 app  - Create project with a simple boilerplate, support typescript.
 block  - Create a umi block.
 library  - Create a library with umi.
 plugin - Create a umi plugin.

选择 ant-design-pro,是的,你没有猜错,我们并不按照套路来。

为何选择这个是有原因的,按照官网搭建出来的内容,相对我们要使用的项目还有很远的路要走,这个过程是持久且没有意义的,ant-design-pro则为我们提供了一个模板,我们在这个模板上进行开发。

问询 ? Which language do you want to use?,我们选择JavaScript,这是为了降低入门的门槛,所以这里决定使用js,如果你是大佬请忽视这个动作。

$ npm install  # 安装依赖,时间比较久
$ npm start  # visit http://localhost:8000

跑起来是这个样子的。你可以简单看看。

demo

你的项目目录是这个样子的:

├── config  # umi 配置,包含路由,构建等配置
│  ├── config  # 配置包含路由等
│  ├── ... # 其他
├── mock  # 本地模拟数据
├── public
│  └── favicon.png # Favicon
├── src
│  ├── assets  # 本地静态资源
│  ├── components  # 业务通用组件
│  ├── e2e # 集成测试用例
│  ├── layouts # 通用布局
│  ├── models  # 全局 dva model
│  ├── pages # 业务页面入口和常用模板
│  ├── services  # 后台接口服务
│  ├── utils # 工具库
│  ├── locales # 国际化资源
│  ├── global.less # 全局样式
│  └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
├── package.json
└── ... # 其他

可用的脚本

npm start # 运行这个脚本会启动服务,自动打开默认浏览器展示你的页面。当你重新编辑代码后,页面还会自动刷新。
npm run build # 运行这个脚本将会编译你的项目,你可以在项目中的 dist 目录中找到编译后的文件用于部署。
npm run lint # 通过这个脚本来查看你的代码有哪些问题
npm test # 这个脚本会执行一系列测试,包括 e2e 测试。
npm run i18n-remove # 这个脚本将会尝试删除项目中所有的 i18n 代码,对于复杂的运行时代码,表现并不好,慎用。

你需要去这里简单看看有哪些脚本可以使用:可用的脚本

主要目录和文件介绍

config 目录

├── config  # umi 配置,包含路由,构建等配置
│  ├── config  # 配置文件:包含路由、样式、proxy等
│  ├── defaultSettings # 默认设置:包括标题title、navTheme等
│  ├── plugin.config # webpack的Plugin配置
│  ├── themePluginConfig # 风格主题的配置

src 目录

src/components组件目录

src/components/Authorized组件

授权组件,路由权限的管理。

关系:
index.jsx -> Authorized(内容权限管理) -> CheckPermissions
          -> renderAuthorize(内容渲染)
          -> Secured(判断是否拥有权限访问此 view 权限) -> CheckPermissions
          -> CheckPermissions(通用权限检查方法) -> PromiseRender(promise渲染)
src/components/GlobalHeader组件

基础布局的头部,包含搜索、用户头像、语言切换。

├── src/components
├── ...
├── GlobalHeader  # 基础布局的头部
│  ├── AvatarDropdown  # 用户头像下拉菜单
│  ├── NoticeIconView  # 通知图标和通知消息视图
│  ├── plugin.config # webpack的Plugin配置
│  ├── RightContent  # 基础布局的头部核心:包含搜索、头像、语言选择
src/components/... 其他组件

HeaderDropdown:头部下拉菜单,用于用户头像、搜索等。
HeaderSearch:头部搜索组件。
NoticeIcon:头部通知组件。
PageLoading:加载组件。
SelectLang:语言切换组件。

src/layouts布局

src/layouts/BasicLayout布局

基础默认布局,菜单、顶部、内容、页脚。包含logo、菜单、面包屑等。

ant-design-pro的布局:

ant-design-pro的布局
src/layouts/SecurityLayout布局

安全布局,负责验证是否登录和登录后跳转加载,我们可以在这里写自己的登录认证规则。

src/layouts/... 其他布局

UserLayout: 用户布局,用于登录页。
BlankLayout: 空白布局,用于打印页面等不需要布局的页面。

src/locales

国际化资源语言,包含四种语言:简体中文、繁体中文、英语、葡萄牙语,如果使用国际化请注意它对诸如:菜单、消息提示等影响。如果你是国内用户,那么你可以忽略它。

src/models

全局 dva model

在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的:

1.UI 组件交互操作;
2.调用 model 的 effect;
3.调用统一管理的 service 请求函数;
4.使用封装的 request.ts 发送请求;
5.获取服务端返回;
6.然后调用 reducer 改变 state;
7.更新 model。

至于dva是什么?请看这里:dva.js

这里我们只需要知道它里面的文件内容如下即可:

// model
{
  namespace: String, // 命名空间
  state: Object, // 状态
  reducer: Object, // 同步更新 state
  effects: Object, // 副作用:处理异步逻辑
  subscriptions: Object // 订阅数据源
}

这些文件被引用在src/pages/.umi/dva中。

我们以 models/global 为例:

namespace: 'global' 说明以下此处的dva命名空间为 global,即你调用的时候需要采用 global.XXX 的形式

其中的 state: {} 是存放状态的,也就是数据。

reducers 是用来更新 state 的,但是他只能是同步的。所以我们需要 effects 来进行异步更新。

即:

state: {
collapsed: false,
notices: [],
}, // 存放状态和数据
  reducers: { // 用来同步设置state
    changeLayoutCollapsed(
      state = {
        notices: [],
        collapsed: true,
      },
      { payload },
    ) {
      return { ...state, collapsed: payload };
    },

    saveNotices(state, { payload }) {
      return {
        collapsed: false,
        ...state,
        notices: payload,
      };
    },
    // ...
 }
  effects: { // 异步更新state,通过调用同步的reducers实现
    *fetchNotices(_, { call, put, select }) {
      const data = yield call(queryNotices);
      yield put({
        type: 'saveNotices',
        payload: data,
      });
      const unreadCount = yield select(
        state => state.global.notices.filter(item => !item.read).length,
      );
      yield put({
        type: 'user/changeNotifyCount',
        payload: {
          totalCount: data.length,
          unreadCount,
        },
      });
    },
    // ...
 }

src/pages

业务页面和常用模板

src/pages/document.ejs 默认html模板,umi 约定如果这个文件存在,会作为默认模板,内容上需要保证有 <div id="root"></div>,模板里可通过 context 来获取到 umi 提供的变量。

user user业务逻辑内容,里面包含login登录模块,如果你需要更换登录页,请在这里处理。

通过 umi block add [block url] --path=[target path] 添加的区块,将会被放置在pages目录下。至于这个命令是做什么的,我们目前先不做理会。后面我会详细说明。

src/services

服务请求层,在 Ant Design Pro 中,后台接口服务需要写在services文件下。当然你也可以不那么做。

例如登录的请求:

import request from '@/utils/request';
export async function fakeAccountLogin(params) {
  return request('/api/login/account', {
    method: 'POST',
    data: params,
  });
}
export async function getFakeCaptcha(mobile) {
  return request(`/api/login/captcha?mobile=${mobile}`);
}

不需要国际化

大多数国内用户是不需要国际化这种东西的,一次我们需要移除它。

首先,使用umi自带的移除国际化的脚本。

npm run i18n-remove

这时已经从系统级别移除了国际化的内容,但是依然剩余了很多没有用的文件和代码,需要我们手动进行处理。

再手动删除 src/components/SelectLangsrc/localessrc/pages/user/login/locales 文件夹。

再从 src/components/GlobalHeader/RightContentsrc/layouts/UserLayout 文件中移除关于 src/components/SelectLang 组件的引用。如下图:

src/components/GlobalHeader/RightContent
src/layouts/UserLayout

再从 src/layouts/UserLayout.less 中移除lang的样式:

src/layouts/UserLayout.less

完成后,我们的初始化就结束了。

这是我构建完后的github项目:https://github.com/nongshuqiner/my-AD-pro-init-template

结语

至此,一个初始可用的基于ant-design-pro的umi项目就构建且说明完成了,接下来就是根据这个umi项目去实战umi官网上的指南了。

提示:后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249