umi+dva项目中的创建及配置

umi+dva 项目中的创建及配置

npm i umi -g //全局安装umi插件

mkdir app 创建目录

cd app 进入目录

npm init -y 初始化

npm i umi-plugin-react --save-dev 安装

创建目录，并且写入配置

在 .umirc.js中写入配置信息

export default {
  history: 'hash', //使用hash路由
  plugins: [
    // 有参数
    [
      'umi-plugin-react',
      {
        dva: {
          immer: true, //使用dva
        },
        antd: true,  //使用antd
      },
      "import",
      { 
        libraryName: "antd-mobile", 
        style: "css" 
      }
    ],
    
  ],
};

启动项目：umi dev

在umi中使用路由

import Link  from  'umi/link'（更多可以看umi官网中的 API ）

使用antd ui 组件
npm install antd-mobile --save
在使用时，直接引用样式

 import { Button } from 'antd-mobile';

移动端自适应

安装 postcss-flexbugs-fixes
安装 postcss-px-to-viewport

extraPostCSSPlugins: [
   require('postcss-flexbugs-fixes'),
   require('postcss-px-to-viewport')({
       viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是375
       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
       selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
       mediaQuery: false, // 允许在媒体查询中转换`px`
   }),
],