创建项目阶段使用先创建react项目再配置Ts的方法比较多弊端不推荐所以采用直接配置Ts通过react脚手架后同时配置TypeScript的支撑create-react-app yingsheng_ts_react_music --template typescript——template typescript——在使用脚手架配置react的时候提供配置Ts服务项目目录结构node_modules存放依赖为什么需要它​​JavaScript 本身没有内置的模块管理系统比如像 Python 的pip或 Java 的Maven所以需要node_modules来集中管理第三方代码。​文件夹结构​早期版本是嵌套结构​依赖的依赖会层层嵌套现在默认是扁平化结构​尽量把重复的依赖提到顶层。​与package.json的关系​package.json是购物清单​记录你要装哪些库node_modules是仓库​实际存放这些库。​为什么这么大​​一个库可能依赖几十个其他库比如webpack依赖了 100 个库所以node_modules经常几百MB甚至几GB。public存放资源放什么​​​固定不变的资源​favicon.ico网站小图标、robots.txt搜索引擎爬虫规则。​直接引用的文件​比如data.json绕过后端API前端直接加载的静态数据。​不被编译的代码​某些第三方库的.js文件如老版本的 jQuery。​特殊文件​index.html项目的“大门”Webpack 会把打包后的代码自动注入到这里。manifest.jsonPWA渐进式网页应用的配置文件定义应用图标、主题色等。​如何引用​​在代码中可以直接用绝对路径但更推荐用process.env.PUBLIC_URLimg src/logo.png / // 直接从 public 文件夹找src存放需要webpack加工的代码与资源为什么需要src​​现代前端项目代码复杂需要模块化、编译、优化不能像public那样直接扔给浏览器。​Webpack 如何处理src​​​入口​从index.tsx开始分析所有依赖。​加载器Loader​​用ts-loader处理 TS用file-loader处理图片。​插件Plugin​​压缩代码、生成 HTML、优化性能。package-lock.json和package.json存放项目的版本详细信息为什么需要两个文件​​场景只有 package.json有 package-lock.json​你开发​✅ 正常✅ 正常​同事下载代码​❌ 可能装到更新版本导致bug✅ 装到完全相同的版本​服务器部署​❌ 可能因版本差异部署失败✅ 保证环境一致​版本号符号的含义​{ dependencies: { react: 18.2.0, // 严格锁定18.2.0版本 typescript: ~5.0.0, // 允许5.0.x只更新最后一位 webpack: ^4.46.0, // 允许4.x.x不更新大版本 vue: * // 任意版本危险 } }项目配置项目的icon将图标文件放置在public中项目的标题在public/index.html中修改值项目的别名通常方便后续对深层目录的调用方法一使用eject暴露方法二推荐cracocreat-react-app config在终端上输入npm install craco/cracoalpha -D支持react版本到5.多后续操作1、创建craco.config.js并且进行配置const path require(path); const resolve (dir) path.resolve(__dirname, dir); module.exports { webpack: { alias: { : resolve(src), }, }, };2、在tsconfig.json配置baseUrl: ., paths: { /*: [src/*] }3 、在package.json的scripts配置成scripts: { start: carco start, build: carco build, test: carco test, eject: react-scripts eject },配置代码规范.editorconfig用于统一代码风格的配置文件它可以确保不同的开发者和编辑器在同一个项目中保持一致的代码格式在根目录创建 .editorconfig文件会有对应图标# http://editorconfig.org root true [*] # 表示所有⽂件适⽤ charset utf-8 # 设置⽂件字符集为 utf-8 indent_style space # 缩进⻛格tab | space indent_size 2 # 缩进⼤⼩ end_of_line lf # 控制换⾏类型(lf | cr | crlf) trim_trailing_whitespace true # 去除⾏尾的任意空⽩字符 insert_final_newline true # 始终在⽂件末尾插⼊⼀个新⾏ [*.md] # 表示仅 md ⽂件适⽤以下规则 max_line_length off trim_trailing_whitespace false集成prettier对代码格式化1、安装prettiernpm install prettier -D2、在根目录创建.prettierrc文件配置好后对想要格式化的文件点击保存便可以格式化进行规范配置{ useTabs: false, tabWidth: 2, printWidth: 80, singleQuote: true, trailingComma: none, semi: false }含义useTabs使⽤tab缩进还是空格缩进选择false tabWidthtab是空格的情况下是⼏个空格选择2个 printWidth当⾏字符的⻓度推荐80也有⼈喜欢100或者120 singleQuote使⽤单引号还是双引号选择true使⽤单引号 trailingComma在多⾏输⼊的尾逗号是否添加 none ⽐如对象类型的最后⼀个属性后 ⾯是否加⼀个 semi语句末尾是否要加分号默认值true选择false表示不加3、在package .json的”scripts“中写入命令方便格式化全部文件prettier: prettier --write .4、创建格式化的忽略文件避免对node __modules众多文件进行格式化浪费资源/build/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*5、执行可以格式化除了忽略文件指定之外的全部文件了npm run prettier配置ESLint检测​统一代码风格​确保团队成员的代码风格一致如缩进、引号、分号等。​避免低级错误​检测未使用的变量、未定义的变量、拼写错误等。​React 特定规则​检查React特有的问题比如缺少key属性react/jsx-key不安全的props传递react/no-unsafe错误的Hooks使用react-hooks/rules-of-hooks1、安装插件vue在创建项⽬时如果选择prettier那么这两个插件会⾃动安装npm install eslint -D2、使用eslint中的自带的工具进行初始化npx eslint --init2、或者自己手动配置我使用的就是这种因为最新的eslint自带创建工具生成的为mjs文件。为了跟随教程进度。所以在根目录新建.eslintrc.js输入以下指令module.exports { env: { browser: true, es2021: true }, extends: [ eslint:recommended, plugin:react/recommended, plugin:typescript-eslint/recommended plugin:prettier/recommended ], parser: typescript-eslint/parser, parserOptions: { ecmaVersion: latest, sourceType: module }, plugins: [react, typescript-eslint], rules: { // 你的规则配置 }, overrides: [ // 覆盖规则配置 ] }3、添加规则在eslintrc.js中的rules中解决craco.config.js的报错rules: { typescript-eslint/no-var-requires: off // 你的规则配置 },4、将eslint与pretter进行一个绑定解决他们的冲突问题每次格式与pretter不一致都报错安装插件vue在创建项⽬时如果选择prettier那么这两个插件会⾃动安装npm install eslint-plugin-prettier eslint-config-prettier -D在.eslintrc.js中的extends中添加pluin:prettier/recommended目录结构的划分src/ - 源代码根目录​​1. assets/ - 静态资源文件夹​assets/ ├── css/ # 样式文件 ├── data/ # 静态数据文件 └── img/ # 图片资源​存放内容​​css/​: 全局样式、主题变量、重置样式表​data/​: 模拟数据、配置JSON、常量定义​img/​: 图标、背景图、Logo等图像资源​2. base-ui/ - 基础UI组件库​​业务作用​存放最基础的、可复用的UI组件如Button、Input、Modal、Loading等原子组件这些组件不应该包含业务逻辑​3. components/ - 业务通用组件​​业务作用​由基础UI组件组合而成的业务组件如UserCard、ProductList、SearchBar等包含一定的业务逻辑但可在多个页面复用​4. hooks/ - 自定义React Hooks​​业务作用​封装可复用的逻辑代码如useAuth认证、useApi接口调用、useLocalStorage等遵循关注点分离原则​5. router/ - 路由配置​​业务作用​定义页面路由和导航逻辑配置路由守卫、懒加载、权限控制管理整个应用的路由结构​6. service/ - 业务服务层​​业务作用​封装所有API接口调用处理数据格式转换、错误处理如userService、productService、orderService等​7. store/ - 状态管理​​业务作用​使用Redux/Zustand等状态管理库存放全局状态和业务逻辑如用户信息、主题设置、购物车状态等​8. utils/ - 工具函数库​​业务作用​存放纯函数工具类如日期格式化、数据验证、加密解密等不依赖React可在任何地方使用​9. views/ - 页面视图层​​业务作用​存放完整的页面组件如HomePage、UserProfile、ProductDetail等组合多个components形成完整页面重置css标准化不同浏览器的默认样式终端输入npm install normalize.css在index.tsx中引入import normalize.css项目自定义处理业务层面的样式统一在assets/css/中创建reset.less配置body, html, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, header, menu, section, p, input, td, th, ins { padding: 0; margin: 0; } a { text-decoration: none; color: #333; } img { vertical-align: top; } ul, li { list-style: none; } button { outline: none; }但是不会生效还需要安装carco声明插件npm install craco-less2.1.0-alpha.0回到之前便有的craco.confit.js中进行配置const path require(path) const CracolessPlugin require(craco-less)//新增 const resolve (dir) path.resolve(__dirname, dir) module.exports { plugins: [{ plugin: CracolessPlugin }],//新增 webpack: { alias: { : resolve(src) } } }reset.less → common.less → index.less → 项目组件 ↓ ↓ ↓ 基础样式 通用工具 统一出口 业务使用在assets/css/中创建index.lessimport ./common.less; import ./reset.less;在assets/css/中创建common.lessbody { font-size: 14px; }文件职责修改频率reset.less​浏览器兼容​很低项目初期设定common.less​项目通用样式​中等随项目发展调整index.less​文件组织​频繁添加新组件时CSS/ ├── common.less # 项目通用样式真正的项目设置 ├── index.less # 样式入口文件项目配置 └── reset.less # 浏览器重置层基础标准化