umijs创建react项目

1. 工程创建

1. 初始化项目

 yarn create @umijs/umi-app

2. 安装依赖

 yarn

3. 启动项目

 yarn start:dev

2.配置项目

1. 配置多环境

config.local.ts // 本地临时配置文件 (后期看是否需要)

config.dev.ts     //  开发环境配置文件

config.prod.ts    // 正式环境配置文件 (后期看是否需要)

config.ts         // 项目公共配置文件

// config.ts 
import { defineConfig } from 'umi';
import routes from './routes';
import proxy from './proxy';

const { REACT_APP_ENV } = process.env;

console.log(REACT_APP_ENV);

export default defineConfig({
  routes,
  proxy: proxy[REACT_APP_ENV || 'dev'],
  favicon: '/logo.svg',
  locale: { // 配置国际化
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
    baseSeparator: '-',
  },
  history: {
    type: 'hash',
  },
  publicPath: './',
  outputPath: 'app/build', // 为了打包后electron可使用
});

2.路由配置

route.ts  // 路由文件 

const route = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    name: '登录',
    path: '/login',
    component: '@/pages/Login/Login',
    icon: 'home',
  },
  {
    name: '主页',
    path: '/designTool',
    component: '@/pages/DesignTool/DesiginToolIndex/DesiginToolIndex',
    icon: 'home',
    // hideChildrenInMenu: true,
    // routes: [
    //   {
    //     name: '详情',
    //     path: '/designTool/detail',
    //     component: '@/pages/DesignTool/DesiginToolDetail/DesiginToolDetail',
    //   },
    //   {
    //     name: '编辑',
    //     path: '/designTool/edit',
    //     component: '@/pages/DesignTool/DesignToolEdit/DesignToolEdit',
    //   },
    //   {
    //     redirect: '/404',
    //   },
    // ],
  },
  {
    name: 'electron操作页',
    path: '/electronPage',
    component: '@/pages/ElectronPage/ElectronHandel',
  },
];

export default route;

3.配置代理

proxy.ts  // 代理文件

// 地址
const devUrl = 'http://192.168.1.1:8080'; 

export default {
  dev: {
    '/api/': {
      target: devUrl,
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

4.封装请求

5.统一处理请求

6.umi项目目录

7.启动项目

yarn start:dev