网易云音乐项目(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文件中添加支持

相关推荐
BUG收容所所长4 小时前
如何用React快速搭建一个AI语音合成应用?从零到一的完整实战指南
前端·javascript·react.js
小高0074 小时前
React 生命周期全景图:从类组件到 Hooks,一次看懂 2025 实战用法
前端·javascript·react.js
胡gh4 小时前
受控组件与非受控组件:前端开发中的两种状态管理模式
前端·react.js·面试
G等你下课4 小时前
基于 React Router 的认证路由守卫与安全重定向机制
前端·react.js
Jimmy5 小时前
构建健壮 React 应用的 5 个重要实践
前端·javascript·react.js
Monika Zhang6 小时前
React框架深度解析与主流前端框架对比
前端·react.js·前端框架
江城开朗的豌豆6 小时前
Redux三剑客:揭秘reducer这个'状态改造师'的魔法
前端·javascript·react.js
江城开朗的豌豆6 小时前
setState vs replaceState:React状态更新的'温柔一刀'与'彻底翻脸'
前端·javascript·react.js
Sane15 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js