基於React從零開始搭建我的個人博客（一）

一、設計分析（暫略）

二、項目搭建

項目以umi腳手架創建項目，包管理工具使用yarn（yarn的安裝與使用自行研究）

1. 創建目錄 myBlog
2. 使用umi腳手架，執行以下命令：

yarn create umi

注意：這裏可能會遇到這麼一個錯誤（沒有此錯誤的可忽略）

D:\WorkProjects\myProject\myBlog>yarn create umi
yarn create v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-umi
文件名、目錄名或卷標語法不正確。
error Command failed.
Exit code: 1
Command: D:\Software\node\node_global\bin\create-umi
Arguments:
Directory: D:\WorkProjects\myProject\myBlog
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

找到 D:\Software\node\node_global\bin （根據你自己的目錄，我的是這個）目錄下的
create-umi.cmd，其內容如下：

@"%~dp0\C:\Users\XYSM\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

將 %_{dp0 刪除（%}dp0\的含義是：修改當前目錄爲批處理本身的目錄），然後保存

@"C:\Users\XYSM\AppData\Local\Yarn\Data\global\node_modules\.bin\create-umi.cmd"   %*

再注意，保存之後不要了再運行 yarn create umi，會重新覆蓋掉剛剛修改的。
修改之後應該：

• 將 create-umi.cmd 所在的文件夾路徑（我的是“D:\Software\node\node_global\bin”），加入系統環境變量 path 中
• 重新打開命令行界面（注意一定要徹徹底底地重新打開），然後運行 create-umi ( 注意是create-umi ) 就可以了！

此處參考：https://blog.csdn.net/ai375355/article/details/94878703

3. 內容選擇：
   
   

4. 安裝依賴：

yarn

5. 啓動項目：

yarn start

6. 基本目錄結構如下：

├── config                          # umi 配置，包含路由，構建等配置
│   ├── config.js                   # umi 配置
│   └── route.config.js             # 路由配置
├── mock                            # 本地模擬數據
├── public
│   └── favicon.png                 # Favicon
├── src
│   ├── assets                      # 本地靜態資源
│   ├── components                  # 業務通用組件
│   ├── layouts                     # 通用佈局
│   ├── models                      # 全局 dva model
│   ├── pages                       # 業務頁面入口和常用模板
│   │   ├── 404.js                  # 404頁面
│   │   └── document.ejs            # html模板文件
│   ├── services                    # 後臺接口服務
│   ├── utils                       # 工具庫
│   ├── global.less                 # 全局樣式
│   ├── common.less                 # less變量文件
│   └── app.js                      # 全局 JS
├── README.md
└── package.json

ok，項目的搭建基本完成