【react | 项目实战】模仿网易云音乐过程记录

一：创建项目

creact-react-app kbjing-music-wangyiyun
           

1：在这里我将本地的代码和远端仓库进行了连接（码云）

• 在码云创建新的仓库
• 然后在创建的仓库找到这段代码

  

• 可以尝试初始化提交项目,看是否和远端建立联系成功

2：整理目录结构，尝试运行

对项目进行配置

1：对css样式进行重置

normalize.css

2：配置别名

• 安装@craco/craco

$ yarn add @craco/craco
           

• 修改package.json

/* package.json */
"scripts": {
 -   "start": "react-scripts start",
 -   "build": "react-scripts build",
 -   "test": "react-scripts test",
 -   "start": "craco start",
 -   "build": "craco build",
 -   "test": "craco test",
}
           

• 在项目根目录创建一个 craco.config.js 用于修改默认配置

/* craco.config.js */
module.exports = {
  // ...
};
           

• 修改配置

const path = require("path");

const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
    webpack: {
        alias: {
            "@": resolve("src"),
            "components": resolve("src/components")
        }
    }
}
           

这样在引入文件的时候就不用再“…/…/…/” 就可以这样了@/page/