umi搭建react的IDEA开发环境

目录

1.安装node.js环境

1.1.安装

1.2.配置npm在安装全局模块时的路径和缓存cache的路径

1.3.配置环境变量

1.4.测试

2.安装yarn

3.安装umi

4.搭建IDEA使用umi开发reactjs环境

4.1创建普通static web项目，直接下一步命令完成创建即可

4.2 初始化package.json文件

4.3 在项目中添加umi依赖

4.4 在根目录中创建config

4.5 编写HelloWorld入门程序

4.6 在pages下创建HelloWorld.js文件

4.7 umi dev启动服务

4.8 添加umi-plugin-react插件

4.9 构建项目

---

1.安装node.js环境

1.1.安装

傻瓜式下一步：

下载完成后双击下载好的可执行文件开始安装，点击next进入下一步，勾选同意协议，继续下一步。然后选择安装的位置，默认是在C盘，改成D盘安装，这是个好习惯，建议保持。然后进入模块配置步骤。

安装完成之后，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号

1.2.配置npm在安装全局模块时的路径和缓存cache的路径

在node.js安装目录下新建两个文件夹 node_global和node_cache，在node_global文件夹下创建node_modules文件夹

npm config set profix "D:\node.js\node_global"
npm config set cache "D:\node.js\node_cache"

1.3.配置环境变量

环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”，如下图

环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“D:\nodejs\node_global”，如下：

1.4.测试

在cmd命令下安装全局webpack

npm install webpack -g 

2.安装yarn

接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些 ，可以把tyarn看做了优化了的yarn

npm npm i yarn tyarn -g       #-g 是指全局安装 tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了

测试是否安装成功

注意：这里如果安装完马上输入tyarn，可能会提示系统找不到，这时候需要配置变量，网上很多教程，这里就不详细写出了

3.安装umi

tyarn global add umi  #安装
umi #进行测试

查看是否成功

注意：安装完马上运行可能会出现umi找不到或者目录不正确，这里需要配置环境变量和修改umi.cmd文件

先查看umi.cmd的位置

tyarn global bin

然后修改此文件成下面这样即可

4.搭建IDEA使用umi开发reactjs环境

4.1创建普通static web项目，直接下一步命令完成创建即可

4.2 初始化package.json文件

在IDEA的Terminal控制台输入以下命令，通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。

tyarn init -y

4.3 在项目中添加umi依赖

tyarn add umi --dev #项目中添加umi的依赖

添加成功

添加成功后会出现这两个文件

4.4 在根目录中创建config

第一步创建config文件夹

第二步，创建config.js文件，在文件中添加下面内容

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {};

4.5 编写HelloWorld入门程序

在根目录下创建src目录，然后在src目录下创建pages子目录

4.6 在pages下创建HelloWorld.js文件

添加下面内容

4.7 umi dev启动服务

#启动服务
umi dev

启动成功

在浏览器输入上面的地址

4.8 添加umi-plugin-react插件

这里我不用命令行，因为umi3对这个插件进行了升级，也可以使用命令行添加，然后升级，具体可以查看umiJs的官网

#添加插件
tyarn add umi-plugin-react --dev

这里我遇到过umi build出现的问题，就是因为插件的版本和umi版本不对应，具体可以查看我的另一篇博客，所以这里我使用IDEA的快捷方式添加插件

第一步，在package.json文件中输入下面内容

"@umijs/preset-react": "^1.3.12"

第二步，在package.json文件中，鼠标右键，选择

安装结束即可

4.9 构建项目

umi build

环境搭建完成