日常记录

脚手架初始化

create-react-app cloud-music

cd cloud-music

npm start

目录说明

├── App.js // 根组件
├── api // 网络请求代码，工具类函数和相关配置
├── application // 项目核心功能
├── assets // 字体配置及全局样式
├── baseUI // 基础UI的轮子
├── components // 可复用UI组件
├── index.js // 入口文件
├── routes // 路由配置文件
├── serviceWorker.js  // PWA 离线应用配置
├── store // redux相关文件
└── style.js //默认样式 // css-in-js
这里只涉及src目录下的文件的处理

默认样式和字体图标的准备

本项目采用 styled-components 进行开发，利用css-in-js的方式
![why to use styled-components]https://juejin.cn/post/6844903878580764686
主要优势是工程化方面有优势

安装 styled-components

1. style.js 中创建并导出 GlobalStyle
2. App.js 导入 GlobalStyle
3. 导入阿里图标 ![阿里图标]https://www.iconfont.cn/ 修改 iconfont.css 需要改成 iconfont.js
4. 字体引入 import { IconStyle } from './assets/iconfont/iconfont';
5. 项目运行 SKIP_PREFLIGHT_CHECK=true 在根目录里面.env中添加，防止全局安装的bable与之冲突，先这么处理着