yarn create umi

选择项目类型

○  Pick Umi App Template
│  Simple App

选择创建工具

○  Pick Npm Client
│  yarn

选择源

○  Pick Npm Registry
│  taobao

启用 Prettier（可选）

yarn umi g
√ Pick generator type » Enable Prettier -- Setup Prettier Configurations

启用Dva

yarn umi g
√ Pick generator type » Enable Dva -- Configuration, Dependencies, and Model Files for Dva

可选配置

? Pick generator type » - Use arrow-keys. Return to submit.
>   Create Pages -- Create a umi page by page nameEnable Jest -- Setup Jest ConfigurationEnable Tailwind CSS -- Setup Tailwind CSS configurationGenerate Component -- Generate component boilerplate codeGenerate mock -- Generate mock boilerplate codeEnable E2E Testing with Cypress -- Setup Cypress ConfigurationGenerator api -- Generate api route boilerplate codeGenerate Precommit -- Generate precommit boilerplate code

常见问题

1.如何导入useDispatch、useSelector？

基本上都可以从umi直接导出。

import { useDispatch, useSelector } from 'umi';

也可以：

import { useSelector } from '@umijs/plugins/libs/dva';

你要说哪个好，咱也不知道。

2.如何在ts/js中使用model中的数据？

import { getDvaApp} from 'umi';const state = getDvaApp()._store.getState();const {global: { mobile, imei },} = state || {};

顺便提一句，umi2.0中的使用：

window.g_app._store.getState().global.channel

3.为什么部分RGBA会被转换为HEX8

原本的rgba：

background-color: rgba(0, 0, 0, 0.7);

经过编译后：

在安卓端无法解析，报“属性值无效”。

查看官方文档：

非现代浏览器兼容 (umijs.org)

配置兼容：

// .umirc.tsexport default {//提升兼容性，会自动给css添加厂商前缀targets: {chrome: 67,ie: 9,ios: 7,android: '4.3',},//防止rgba被编译为HEX8cssMinifier: 'cssnano',jsMinifier: 'terser',
};

4.iOS如何禁用长按选择？

// global.lesshtml,
body,
:root {user-select: none;
}//user-select阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，比如input、textarea。为了解决Modal弹窗里面input在ios无法编辑的情况
[contenteditable='true'],
input,
textarea {user-select: auto !important;
}

如果没有在.umirc.ts配置中配置targets，默认不会添加厂商前缀–webkit，那么也不会生效，要么手动加前缀，要么改targets。