create-react-appUmiJS创建React项目

一、create-react 创建项目 create-react-app 是基于 webpack 的打包层方案，包含 build、dev、lint 等，他在打包层把体验做到了极致，但是不包含路由，不是框架，也不支持配置。 1、全局安装crate-react-app npm i create-react-app -g 2、创建项目

创建普通项目

create-react-app myreact

创建 ts项目

yarn create react-app myreact --template typescript默认安装 react 18.x，出现UI组件引用ts报错

回退到 react 17.0.0

  "@types/react": "^17.0.0",
  "@types/react-dom": "^17.0.0",

入口文件 index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

reportWebVitals();

3、cd进去、启动 yarn start 4、react-router (v6的路由写法不一样)

npm i react-router-dom -Syarn add react-router-dom@5.3.0yarn add @types/react-router-dom@5.3.3 -D

5、集成sass

安装sass

npm i node-sass -S
yarn add node-sass

6、添加代理

安装依赖：

yarn add http-proxy-middleware

注：

/mock/ 后面的 / 可去除http://xxx/mock/mockGoods/list

创建 src/setupProxy.js

// 配置代理 - 用于联调
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/mock/', {
            target: 'http://ebill.allinpalm.cn/',
            changeOrigin: true
        })
    )
}

官方文档

7、添加别名

安装依赖

yarn add react-app-rewired

创建 config-overrides.js

const path = require('path');
const { override, addWebpackAlias } = require('customize-cra');

module.exports = override (
    addWebpackAlias({
        '@': path.resolve(__dirname, 'src')
    })
)

创建paths.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    }
}

tsconfig.json添加

{
    ...,
    "extends": "./paths.json"
}

二、umi创建react项目

新建项目

mkdir umi-app && cd umi-app

安装umi

yarn create umi选择 antd-pro、ts、simple/complete

simple

complete

1、目录结构

├── config  # umi 配置，包含路由，构建等配置
│  ├── config  # 配置包含路由等
│  ├── ... # 其他
├── mock  # 本地模拟数据
├── public
│  └── favicon.png # Favicon
├── src
│  ├── assets  # 本地静态资源
│  ├── components  # 业务通用组件
│  ├── e2e # 集成测试用例
│  ├── layouts # 通用布局
│  ├── models  # 全局 dva model
│  ├── pages # 业务页面入口和常用模板
│  ├── services  # 后台接口服务
│  ├── utils # 工具库
│  ├── locales # 国际化资源
│  ├── global.less # 全局样式
│  └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
├── package.json
└── ... # 其他

2、config目录

├── config  # umi 配置，包含路由，构建等配置
│  ├── config  # 配置文件：包含路由、样式、proxy等
│  ├── defaultSettings # 默认设置：包括标题title、navTheme等
│  ├── plugin.config # webpack的Plugin配置
│  ├── themePluginConfig # 风格主题的配置