# CRA+TailwindCSS+ArcoDesign+Less+Typescript+Redux 初始化配置
## 第一步：启动CRA，创建React App（with TS）
```sh
yarn create react-app my-app --template typescript
cd my-app
```
## 第二步：安装TailwindCSS（[文档](https://tailwindcss.com/docs/guides/create-react-app)）
```sh
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
编辑`tailwind.config.js`文件：
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
编辑最根部的css/less文件，如`src/index.css`或者`App.css`，在最上方添加三行：
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
参考Tailwind文档的[生产优化章节](https://tailwindcss.com/docs/optimizing-for-production)，给`postcss.config.js`添加相应的生产压缩配置：
```js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
}
}
```
安装cssnano：
```sh
yarn add -D cssnano
```
## 第三步：安装Arco Design
```sh
# yarn
yarn add @arco-design/web-react
```
## 第四步：安装Router并与Arco结合
```sh
yarn add [email protected] # 可选5或6
yarn add -D @types/[email protected]
```
Arco的Link和Button组件都支持a标签式的硬跳转，但这种跳转与React-Router是不兼容的（是非状态的），因此包装新的Link和RouteButton组件，实现：使用或不使用Arco组件样式+兼容Router路由。
`src/components/Link.tsx`:
```jsx
import { Link as ArcoLink, LinkProps } from '@arco-design/web-react';
import { Link as RouteLink } from 'react-router-dom';
import React from 'react';
/**
* # !!! 具有路由跳转功能的链接必须使用此组件，包括普通的React-Router Link（传入noArco） !!!
*
* 混合arco.design的Link样式和React-Router的Link功能，
*
* 使用to和href是等效的，to更优先
*/
function Link(props: LinkProps & {
to?: string
noArco?: boolean
}) {
const {to, href, noArco, disabled, ...rest} = props;
const link = to ?? href ?? '';
return noArco ? (
disabled ? (
<span {...rest as any}/>
) : (
<RouteLink to={link} {...rest as any}/>
)
) : (
disabled ? (
<ArcoLink disabled {...rest}/>
) : (
<RouteLink to={link}><ArcoLink {...rest}/></RouteLink>
)
);
}
export default Link;
```
`src/components/RouteButton.tsx`:
```jsx
import React from 'react';
import {Button, ButtonProps} from '@arco-design/web-react';
import {Link} from 'react-router-dom';
/**
* # !!! 具有路由跳转功能的按钮必须使用此组件 !!!
*
* 混合arco.design的Button样式和React-Router的Link功能，
*
* 使用to和href是等效的，to更优先
*/
function RouteButton(props: ButtonProps & {
to?: string
}) {
const {to, href, disabled, ...rest} = props;
const link = to ?? href ?? '';
return disabled ? (
<Button disabled {...rest}/>
) : (
<Link to={link}><Button {...rest}/></Link>
);
}
export default RouteButton;
```
## 第五步：安装Less
见 https://juejin.cn/post/6844903761484185613
## 第六步：添加Redux（Redux Toolkit）支持（[文档](https://redux-toolkit.js.org/tutorials/quick-start)）
```sh
yarn add @reduxjs/toolkit react-redux redux
```
![]()