网易云音乐项目(React+Ts)

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

相关推荐
日月晨曦39 分钟前
从多页到单页:React应用架构的进化之旅
前端·react.js
日月晨曦40 分钟前
React Hooks入门指南:让函数组件从此不再"缺胳膊少腿"
前端·react.js
liliangcsdn2 小时前
基于Langgraph创建ReAct Agent应用示例
前端·javascript·react.js
CF14年老兵2 小时前
React 共享状态:告别“祖传”Props,拥抱“真香”体验!🚀
前端·react.js·trae
yuanyxh12 小时前
React Native 初体验
前端·react native·react.js
GISer_Jing15 小时前
React过渡更新:优化渲染性能的秘密
javascript·react.js·ecmascript
hj5914_前端新手21 小时前
React基础 - React.memo,useCallback,useMemo,详解
前端·react.js
柯南二号1 天前
【大前端】React useEffect 详解:从入门到进阶
前端·react.js·前端框架
Spider_Man1 天前
闭包危机:你的状态还活着吗?👻
前端·javascript·react.js
子兮曰1 天前
10个你不知道的React高级技巧,让你的开发效率翻倍!
react.js