Umi脚手架搭建React项目

项目搭建

注意：官方版本变动，本文章仅部分内容可供参考（请以umi官方文档为准）

项目以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 "create-umi@0.13.7" 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，项目的搭建基本完成