快速搭建UmiJS4.0项目及常见问题解决方案

news2024/11/24 11:58:09

 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 name
    Enable Jest -- Setup Jest Configuration
    Enable Tailwind CSS -- Setup Tailwind CSS configuration
    Generate Component -- Generate component boilerplate code
    Generate mock -- Generate mock boilerplate code
    Enable E2E Testing with Cypress -- Setup Cypress Configuration
    Generator api -- Generate api route boilerplate code
    Generate 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);

经过编译后：

企业微信截图_16994128904932.png

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

查看官方文档：

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

配置兼容：

// .umirc.ts

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

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

// global.less

html,
body,
:root {
  user-select: none;
}

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