目录
1.2.配置npm在安装全局模块时的路径和缓存cache的路径
4.1创建普通static web项目,直接下一步命令完成创建即可
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
环境搭建完成