一、创建项目:创建文件夹->打开gitBash
先下载 npm install -g create-react-app
输入create-react-app react18_ts_music --template typescript
二、配置@别名路径
安装craco: npm i -D @craco/craco
在根目录下创建craco.config.js文件
更改package.json文件：
在根目录下创建tsconfig.json文件：
三、配置项目的icon
取官网上扒下来，然后放到项目的public文件夹中，再引入到index.html中
四、配置项目的标题
更改public/index.html中的title
五、react项目代码规范配置(eslint+prettier+eslint-plugin-prettier+eslint-config-prettier+@typescript-eslint/parser+@typescript-eslint/eslint-plugin):
a、打开终端下载 npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin
b、在项目根目录下创建 .eslintrc.js文件，配置 ESLint 以支持 Prettier 和 TypeScript：
c、在项目根目录下创建 .prettierrc.js 文件，配置 Prettier 的格式化规则：
并且创建 .prettierignore文件
最后在package.json文件中的"scripts"中添加配置
d、在vscode中安装插件Eslint和Prettier
六、项目目录结构划分
components文件夹用于存放多个组件中的通用组件
hooks文件夹用于存放自定义的hook函数
service文件夹用于存放网络请求
utils文件夹用于存放工具函数
views文件夹用于存放路由组件
assets文件夹用于存放项目中用到的静态样式，静态图片资源等。
七、初始化项目样式
1、下载并引入normalize.css文件(该文件用于初始化项目样式)
npm install normalize.css
在项目入口文件index.tsx中引入
import 'normalize.css'
2、在assets文件夹中新建一个css文件夹用于存放项目的css资源
新建reset.less文件存放项目初始样式
新建common.less文件存放项目公共样式
新建index.less文件用于引入上面创建的样式文件，方便之后项目中只用引入 index.less一个文件即可
八、项目中配置对less文件的支持
安装最新版本的craco-less：npm i -S craco-less --force
在craco.config.js文件中添加支持
