create-react-app / UmiJS创建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 -S
• yarn add react-router-dom@5.3.0
• yarn 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"
}

二、umi3创建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 # 风格主题的配置

三、Pro-cli创建项目（antd-pro V5）

• 安装脚手架

npm i @ant-design/pro-cli -g

• 创建项目

pro create myapp

• 选择umi版本

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4umi@3

参考文献

Ant Design Pro

Ant Design Pro Github