1.云音乐项目规范
1.项目介绍
。。。。。。
2.项目规范
- 项目开发规范以及代码风格
1.文件夹和文件名称统一使用小写，多个单词以连接符（-）连接。
2.JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰。
3.CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS，局部采用styled-component）
4.整个项目不在使用class组件，统一使用函数式组件，并且全面拥抱Hooks
5.所有的函数式组件，为了避免不必要的渲染，全部是同memo进行包裹。
6.组件内部的状态，使用useState，useReducer；业务数据全部放在redux中管理。
7.函数组件内部基本按照以下顺序编写代码：
1 组件内部state管理
2 redux的hooks代码
3 其他组件hooks代码
4 其他逻辑代码
5 返回JSX代码
8.redux代码规范如下
1 每个模块有自己独立的reducer，通过combineReducer进行合并
2 异步请求代码使用redux-thunk， 并且卸载actionCreators中
3 redux直接采用redux hooks方式编写，不再使用connect
9.网络请求使用axios
1 对axios采用二次封装
2 所有的模块的请求都会放到一个请求文件夹中单独使用
10.项目使用AntDesign
1 项目中某些AntDesign中的组件会被拿过来直接使用
2 但是多部份组件还是自己进行编写
其他规范在项目中根据实际情况决定和编写。
3.项目创建
第1步： react-create-app web-music。
第2步： 清除直接创建出来的项目中的垃圾文件。
第3步： 划分目录结构如下（对应其主要功能）
4.项目初始化
第一步：初始化css git上下载normalize.css 或者 yarn add normalize.css
具体步骤：
1.assets/css @import “~normalize.css”;
2.index.js import import “./assets/css/reset.css”
可以添加一些自己的样式设置：
第二部：项目配置别名（方便我们拿到对应的文件/图片等）
1.安装 @craco/craco
2.自定义carco.config.js 配置别名
/**
* 配置项目别名：方便我们读取一些文件等
*/
const path = require("path");
const resolve = dir => path.resolve(__dirname,dir);
module.exports = {
webpack:{
alias:{
"@":resolve("src"),
"components":resolve("src/components")
}
}
}
3.项目模块简单划分
这样一个react项目的基本开发准备流程完毕！
之后react项目的开发过程中的一些重难点问题，将会更新到 react项目开发经验中。
我们常常爱而不得，但是我们应该永远相信爱。
不必去怀疑自己是否优秀足够，自己永远向前就是最好的。