【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/