持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情

环境安装

nodejs安装与配置

从nodejs官网下载稳定版nodejs，由于nodejs升级很快，建议还是使用稳定版

安装完成之后可修改npm全局包的存放位置，仓库的位置


//全局包目录，就在node安装目录新建了个nodejs文件夹存放

npm config set prefix D:/nodejs/node_global/ 

//全局包缓存目录，就在node安装目录新建了个nodejs文件夹存放

npm config set cache D:/nodejs/node_cache/ 

//设置仓库为阿里镜像，

npm config set registry https://registry.npm.taobao.org/

npm设置完之后需在环境变量中将设置的全局包目录添加到path中，阿里镜像仓库有时不是最新的可以设置为原始仓库registry.npmjs.org

creat-react-app 安装

这个是官方出的react的脚手架，官方推荐使用yarn来进行包管理，yarn是Facebook推出的包管理器目的是解决npm包管理的一些短板例如版本问题，但是发展到现在基本功能都是一样的，yran中有一些新的功能点，这里使用的是npm。


-g表示全局安装

npm install -g create-react-app

安装完成之后就可以使用creat-react-app 项目名称来创建项目了，项目名称不能包含大写字母。

npx create-react-app my-app

vscode安装

官网，安装没啥好说的照着指引一步步做就可以了，安装完成之后会询问是否增加环境变量，增加后重启机器可以使用命令快捷打开工作空间

//以指定目录为工作空间打开一个窗口，当前目录为"."
code .

配置调试环境：快捷键(Ctrl+Shift+D)选择create a launch.json file

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:服务端口",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

其他

碰到的问题

使用create-react-app创建的项目，build的页面为空白页


// package.json 文件增加配置

"homepage": ".",

VSCODE中代码提醒的快捷键设置

在[File-Preference-Keyboard Shortcusts]打开的页面中搜索 editor.action.triggerSuggest 换成自己顺手的快捷键

参考资料

npm.taobao.org/

code.visualstudio.com/docs/nodejs…

React环境搭建