React框架Umi实战(1)简介与使用脚手架

之前写完了dva入门系列,它只是一个纯粹的数据流框架,拿来开发是没有问题的.但是还是有一些繁琐的步骤,每次要手动注册model,手写route路由.Umi的出现结合dva,使得开发更加的优雅与便捷.

1 特性

? 开箱即用,内置 react、react-router 等
? 类 next.js 且功能完备的路由约定,同时支持配置的路由方式
? 完善的插件体系,覆盖从源码到构建产物的每个生命周期
? 高性能,通过插件支持 PWA、以路由为单元的 code splitting 等
? 支持静态页面导出,适配各种环境,比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
? 开发启动快,支持一键开启 dll 和 hard-source-webpack-plugin 等
? 一键兼容到 IE9,基于 umi-plugin-polyfills
? 完善的 TypeScript 支持,包括 d.ts 定义和 umi test
? 与 dva 数据流的深入融合,支持 duck directory、model 的自动加载、code splitting 等等

2 使用脚手架

1.安装umi

npm install -g umi

2.检查

umi -v

3.安装脚手架

npm install -g create-umi

4.使用脚手架初始化工程

create-umi

选择>project,然后选择依赖,这节课先选择antd,不选择dva.
5.运行项目
进入项目目录,先安装依赖,然后运行

npm install
npm start

6.浏览器访问
如果顺利,在浏览器打开 http://localhost:8000 可看到以下界面,

3 约定目录介绍

脚手架自动生成了一些目录,你需要按约定的方式去写,umi才能正常运行一个复杂应用的目录结构如下:

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录,基于 express
├── config/
    ├── config.js                  // umi 配置,同 .umirc.js,二选一
└── src/                           // 源码目录,可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录,里面的文件即路由
        ├── .umi/                  // dev 临时目录,需添加到 .gitignore
        ├── .umi-production/       // build 临时目录,会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1,任意命名,导出 react 组件
        ├── page1.test.js          // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2,任意命名
    ├── global.css                 // 约定的全局样式文件,自动引入,也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
├── .umirc.js                      // umi 配置,同 config/config.js,二选一
├── .env                           // 环境变量
└── package.json

敲黑板,知识点:
umi是按page来划分的,每一个page里只有自己的model,service,util等。不像dva的目录结构,所有的model,service,page统一管理。就看你喜欢什么样的管理方式了。

dist

默认输出路径,可通过配置 outputPath 修改。

mock

约定 mock 目录里所有的 .js 文件会被解析为 mock 文件。

比如,新建 mock/users.js,内容如下:

export default {
‘/api/users’: [‘a’, ‘b’],
}

src

约定 src 为源码目录,但是可选,简单项目可以不加 src 这层目录。

比如:下面两种目录结构的效果是一致的。

  • src
    • pages
      • index.js
    • layouts
      • index.js
  • .umirc.js
  • pages
    • index.js
  • layouts
    • index.js
  • .umirc.js

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’ },
] }
]

src/pages

约定 pages 下所有的 (j|t)sx? 文件即路由。关于更多关于约定式路由的介绍,请前往路由章节。

src/pages/404.js

404 页面。注意开发模式下有内置 umi 提供的 404 提示页面,所以只有显式访问 /404 才能访问到这个页面。

src/pages/document.ejs

有这个文件时,会覆盖默认的 HTML 模板。需至少包含以下代码,

src/pages/.umi

这是 umi dev 时生产的临时目录,默认包含 umi.js 和 router.js,有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。

src/pages/.umi-production

同 src/pages/.umi,但是是在 umi build 时生成的,会在 umi build 执行完自动删除。

.test.js 和 .e2e.js

测试文件,umi test 会查找所有的 .(test|e2e).(j|t)s 文件跑测试。

src/global.(j|t)sx?

在入口文件最前面被自动引入,可以考虑在此加入 polyfill。

src/global.(css|less|sass|scss)

这个文件不走 css modules,自动被引入,可以写一些全局样式,或者做一些样式覆盖。

.umirc.js 和 config/config.js

umi 的配置文件,二选一。

.env

环境变量,比如:

CLEAR_CONSOLE=none
BROWSER=none

主要注重page目录就行了,其他的在你入门学习过程中可能都用不到。

4 使用命令创建一个新的页面

进入src目录,执行命令

umi g page users

这样在pages目录下会生成新的users页面,浏览器访问http://localhost:8000/users:

除了生成页面,还有别的命令

umi g 是 umi generate 的别名,可用于快速生成 component、page、layout 等,并且可在插件里被扩展,比如 umi-plugin-dva 里扩展了 dva:model,然后就可以通过 umi g dva:model foo 快速 dva 的 model。

别忘了关注我 mike啥都想搞
mike啥都想搞

还有其他后端技术分享在我的公众号。

你可能感兴趣的:(umi,umi,react,node)