1. 项目文件介绍-CSDN博客

本文链接：https://blog.csdn.net/weixin_55555471/article/details/140771216

react-dome

一、简介

这是一个基于reacthook开发的前端页面

二、用到的技术栈

1. reacthook

用途：React Hooks 是一种在函数组件中添加状态和其他 React 特性的方式。它们允许开发者在不编写类的情况下使用状态和其他 React 功能，从而简化了组件的编写过程。常用的 Hooks 包括 useState（用于添加和管理状态）、useEffect（用于执行副作用操作）、useContext（用于访问 React 的 Context）等。

优点：使代码更简洁、可读性更高，提高了组件的可测试性和重用性。

2. typescript

用途：TypeScript 是 JavaScript 的一个超集，添加了可选的静态类型和基于类的面向对象编程。它扩展了 JavaScript 的功能，使代码更加健壮、易于维护和开发。

优点：提供了类型系统，有助于在编译时捕获错误，提高代码质量和开发效率。

3. vite

用途：Vite 是一种新型的前端构建工具，旨在提供更快的开发服务器启动时间和更快的热模块替换（HMR）。它使用原生的 ES 模块来实现开发服务器，并支持代码拆分、Tree-shaking 和其他优化技术。

优点：显著提高了开发效率，优化了生产构建，提供了灵活的插件系统和配置选项。

4. antd

用途：Ant Design 是一个基于 React 的 UI 设计语言和 React 组件库，主要用于研发企业级中后台产品。它提供了一套高质量的 React 组件，帮助开发者快速构建美观、高效的 Web 应用。

优点：拥有丰富的组件和强大的定制化能力，能够满足复杂的企业级应用需求。

5. echarts

用途：ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容当前绝大多数浏览器（IE8/9/10/11, Chrome, Firefox, Safari等）。它提供了丰富的图表类型和交互功能，让开发者可以轻松创建各种精美的数据可视化图表。

优点：图表类型丰富、配置灵活、性能优异，是数据可视化的理想选择。

6. redux

用途：Redux 是一个用于 JavaScript 应用的状态容器，提供可预测化的状态管理。它适用于中大型项目，帮助开发者进行统一的数据管理和维护。

优点：提供了单一的数据源和清晰的数据流，使得应用的状态管理更加简单和可预测。

7. react-router-dom

用途：react-router-dom 是一个用于构建单页应用的 React 路由库。它允许开发者在 React 应用中实现客户端路由功能，即根据 URL 的变化加载不同的组件。

优点：简化了路由管理，提高了应用的导航性能和用户体验。

8. axios

用途：Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。它可以轻松地从浏览器中创建 XMLHttpRequests，也可以从 node.js 创建 http 请求。

优点：支持 Promise API，拦截请求和响应，转换请求数据和响应数据，取消请求，自动转换 JSON 数据等。

9. prettier

用途：Prettier 是一个代码格式化工具，支持多种语言，包括 JavaScript、TypeScript、CSS 等。它能够自动调整代码格式，使其符合一定的风格规范。

优点：减少了代码风格差异带来的问题，提高了代码的可读性和一致性。

10. eslint

用途：ESLint 是一个静态代码分析工具，用于识别和报告 JavaScript 代码中的模式。它可以帮助开发者避免错误，保持代码风格一致，并促进最佳实践。

优点：提高了代码质量，减少了运行时错误，促进了团队之间的协作。

11. react-i18next

用途：react-i18next 是一个用于 React 的国际化（i18n）解决方案，它基于 i18next 库。它允许开发者在 React 应用中实现多语言支持，使得应用能够根据不同的语言环境展示相应的内容。

优点：简化了国际化过程，提高了应用的可访问性和用户体验。

12. Mockjs

用途：Mockjs 是一个模拟数据生成器，用于在前端开发中拦截 Ajax 请求，并返回模拟的响应数据。它可以帮助开发者在后端接口尚未完成时，独立进行前端开发。

优点：提高了开发效率，减少了前后端联调的依赖。

13. less

用途：Less 是一种 CSS 预处理器，通过增加变量、嵌套规则、混合（mixins）等特性，使 CSS 编写更加灵活、高效和可维护。

优点：提高开发效率，减少维护成本

三、项目目录

1. node_modules目录

项目所需要的依赖

2. public目录

项目需要的静态资源，不需要编译

3. scr目录

开发过程中主要的目录，所有的前端页面和逻辑代码，源代码目录

3-1. api目录

api请求，用于存放与后端API进行交互的函数或模块

3-2. components目录

用于存放可复用的ui组件

3-3. config目录

存放项目配置信息的目录，可能包括环境变量、路由配置等

3-4. hooks目录

用来存放自定义的hooks

3-5. locales目录

用于存放与国际化相关的文件，如不同语言的翻译文本

3-6. pages目录

用来存放应用的页面级组件和路由

3-7. typings目录

用于存放全局类型定义或第三方库的类型扩展。这些类型定义有助于在开发过程中提供代码自动补全和类型检查

3-8. utils目录

用于存放项目中使用的工具函数或模块

3-9. main.tsx

入口文件，项目的入口文件，通常负责初始化应用，引入必要的库和框架、配置路由等

3-10. vite-env.d.ts

vite的环境声明文件，用于typescript类型的扩展

4. package.json

定义了项目的依赖和脚本，是项目的主要配置文件

5. package-lock.json

执行 npm install时生成，用于记录当前状态下实际安装的各个npm包的具体来源和版本号。确保项目依赖的一致性，防止在不同环境或不同时间安装时出现的版本差异导致的问题。如果当你下载依赖的时候一直报错（node版本是对的），可以让你的同事将他的这个文件发给你，你再使用npm install可以就能够下载成功了

6. index.html

网站的首页文件，包含网站的主要内容和导航

7. vite.config.ts

vite的配置文件，用于配置构建选项和插件。包含了基础路径、构建输出目录、开发服务器配置、模块解析规则、插件配置等选项

8. .eslintrc.cjs

eslint的配置文件，用于定义代码风格和编码规范。它是common JS格式的配置文件，可以使用require语句导入node.js模块。可以指定环境设置、解析器、插件、规则、扩展名、全局变量等选项

9. .gitignore

git版本控制系统中的一个配置文件，用于指定哪些文件或目录应被GIT忽略，不纳入版本控制

10. tsconfig.json

typescript编译选项配置文件，用于配置typescript编译器的行为
11. tsconfig.node.json

四、注意

注意，这边当前使用的是 node 18.14.2 npm 8.5.5

项目具体信息请查看cdn: http://t.csdnimg.cn/lq54F
github: https://github.com/taozhifeng2010/react-dome

1. 开发时遇到的问题点

1）运行新的项目

如果是新手，拿到一个新的项目时，想要快速运行该前端项目时准备工作

查看该项目的README.md文件，有些开发大佬会写运行的说明，如果没有写的话，请看下面
找到package.json文件，通常的项目都是需要依赖文件的，所以找到这个文件就等于你找到了运行程序的钥匙
找到这个文件之后，使用npm或者pnpm运行该文件下的scripts里面的命令
如果你是前后端不分离的项目的话，是不存在package.json文件的，你需要配置idea来打开该项目