一、创建项目:创建文件夹->打开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文件中添加支持

