【前端】nodejs安装与环境配置

1、下载

方式一:公众号获取

关注【I am Walker】,回复”nodejs“即可

方式二:官网下载

https://nodejs.org/en/download/

2、安装

修改一下安装的目录,或者默认也ok
然后就一直点next 下一步就ok了

3、测试是否安装成功

打开命令行 win+R->输入CMD
然后输入npm -v查看npm的版本,nodejs自带npm

4、修改cache和global的路径

在nodejs下面创建两个文件夹
node_cachenode_global
![image.png](https://img-blog.csdnimg.cn/img_convert/ccc48cdaf8c5576e0af4ab9497def507.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=181&id=u0f2f150d&margin=[object Object]&name=image.png&originHeight=181&originWidth=799&originalType=binary&ratio=1&rotation=0&showTitle=false&size=21153&status=done&style=none&taskId=u1fd61d62-892e-4534-95cc-d68800bcabb&title=&width=799)

然后在命令行中执行指令,注意将node_globalnode_cache修改成自己的路径
npm config set prefix D:\walker\env\nodejs\node_global
npm config set cache D:\walker\env\nodejs\node_cache

例如我的
![image.png](https://img-blog.csdnimg.cn/img_convert/179dd58e4008c4852d44d34ee62295ed.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=73&id=u9f1ad550&margin=[object Object]&name=image.png&originHeight=73&originWidth=663&originalType=binary&ratio=1&rotation=0&showTitle=false&size=2805&status=done&style=none&taskId=ufe895995-d93b-43ec-98ea-e162a354084&title=&width=663)

然后查看一下是否配置成功
npm config get prefix
npm config get cache
![image.png](https://img-blog.csdnimg.cn/img_convert/2d1fc5050344ce08c4b371ff9a22b8e6.png#clientId=u91187262-a13b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=110&id=u8e052fe9&margin=[object Object]&name=image.png&originHeight=110&originWidth=555&originalType=binary&ratio=1&rotation=0&showTitle=false&size=4529&status=done&style=none&taskId=uec0f3801-841e-4291-9e1b-19b72d04026&title=&width=555)

5、环境配置

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
![image.png](https://img-blog.csdnimg.cn/img_convert/173a39f3f8360af94fd91cd63c4a0698.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=610&id=u22b195df&margin=[object Object]&name=image.png&originHeight=610&originWidth=502&originalType=binary&ratio=1&rotation=0&showTitle=false&size=30754&status=done&style=none&taskId=uce76e35f-98e6-47f1-b3cb-8bc907e732c&title=&width=502)

1、添加NODE_PATH

![image.png](https://img-blog.csdnimg.cn/img_convert/4e561656e65b5dcf60799c9ae1e753db.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=320&id=u16a61a9c&margin=[object Object]&name=image.png&originHeight=320&originWidth=717&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22421&status=done&style=none&taskId=uefb7cd3e-f061-44c3-882e-1abdf0174ed&title=&width=717)

“新建“
变量名:NODE_PATH
变量值:node_modules的路径![image.png](https://img-blog.csdnimg.cn/img_convert/941ae2c0096d6cb919903f80fa18ce3a.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=179&id=u68cee658&margin=[object Object]&name=image.png&originHeight=179&originWidth=702&originalType=binary&ratio=1&rotation=0&showTitle=false&size=19194&status=done&style=none&taskId=u30f67bc3-667e-44bb-8f23-86908541026&title=&width=702)

2、添加Path

![image.png](https://img-blog.csdnimg.cn/img_convert/44217dd2b52f71f7fd04d8786cc59287.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=128&id=ueaf6ff39&margin=[object Object]&name=image.png&originHeight=128&originWidth=648&originalType=binary&ratio=1&rotation=0&showTitle=false&size=10833&status=done&style=none&taskId=u074b034b-9ac9-407f-93bd-61cfa40d127&title=&width=648)
![image.png](https://img-blog.csdnimg.cn/img_convert/aed06e22c57ad088e16480c1fa409526.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=566&id=u919db48c&margin=[object Object]&name=image.png&originHeight=566&originWidth=560&originalType=binary&ratio=1&rotation=0&showTitle=false&size=35495&status=done&style=none&taskId=ufdc85773-b872-48e5-99bd-a5b7b6d2f5e&title=&width=560)

node_global的路径添加进去
![image.png](https://img-blog.csdnimg.cn/img_convert/f13c2ffe2bb486ffc3f61de6301cdbd4.png#clientId=ufd03c04a-d4d9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=181&id=u12288ec2&margin=[object Object]&name=image.png&originHeight=181&originWidth=619&originalType=binary&ratio=1&rotation=0&showTitle=false&size=22620&status=done&style=none&taskId=u89a99730-f063-4ef3-9c63-c46a5c1326f&title=&width=619)

6、配置淘宝镜像

1、在命令行中执行
npm config set registry [https://registry.npm.taobao.org](https://registry.npm.taobao.org)
2、查看是否修改成功
npm config get registry

![image.png](https://img-blog.csdnimg.cn/img_convert/3340d8de9adca9d63e15846b33d000ff.png#clientId=u91187262-a13b-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=88&id=u2ca695f9&margin=[object Object]&name=image.png&originHeight=88&originWidth=675&originalType=binary&ratio=1&rotation=0&showTitle=false&size=3615&status=done&style=none&taskId=ubc7f279b-d761-45be-a123-73d77f24fba&title=&width=675)

7、测试

在命令行中执行npm install express -g
全局安装express
-g:代表的是全局安装的意思

有可能会安装失败,这可能是权限的问题,所以可以用管理员权限打开命令行,然后再执行npm install express -g

### 如何安装Node.js并进行前端开发环境配置 #### 1. Node.js 的简介及其作用 Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行时,它允许开发者使用 JavaScript 编写服务器端应用程序[^1]。通过 Node.js,可以轻松构建高效的网络应用服务。 --- #### 2. 下载安装 Node.js 为了安装 Node.js,需访问其官方网站 (https://nodejs.org/) 并根据操作系统选择合适的版本下载[^2]。对于 Windows 用户,可以选择 MSI 安装包;而对于 Linux 或 macOS 用户,则可以通过包管理器或者二进制文件完成安装。 在安装过程中,请注意设置以下参数: - **安装位置**:默认即可,但如果需要自定义路径,请记住该路径以便后续配置。 - **全局模块存放位置**:通常建议将其放置在一个独立目录中,便于管理维护。 - **环境变量调整**:确保 `PATH` 变量包含 Node.js npmNode Package Manager)的可执行文件路径[^3]。 --- #### 3. 配置 npm 全局路径缓存路径 为了让项目更加整洁有序,在安装完成后还需要对 npm 的全局路径缓存路径进行个性化设定: ```bash npm config set prefix "C:\Program Files\nodejs\node_global" npm config set cache "C:\Program Files\nodejs\node_cache" ``` 上述命令中的路径应当替换为你实际使用的 Node.js 安装路径[^4]。此操作有助于避免权限问题,并使依赖项更易于查找更新。 --- #### 4. 测试安装是否成功 打开终端或命令提示符窗口,输入以下两条指令来验证 Node.js 是否正确安装以及 npm 版本号: ```bash node -v npm -v ``` 如果返回对应的版本信息,则说明安装无误。 --- #### 5. 创建基本的前端开发环境 一旦完成了以上步骤,就可以着手建立适合于前端项目的开发框架了。这可能涉及以下几个方面的工作: - 使用 Express 构建基础服务; - 利用 Babel 转译现代 ES6+ 语法到兼容性强的老式代码; - 结合 Webpack 打包静态资源如 CSS、JavaScript 文件等。 以下是创建简单 HTTP Server 的例子: ```javascript const http = require('http'); // 创建服务器实例 const server = http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World!\n'); }); // 设置监听端口 server.listen(3000, () => { console.log('Server running at http://localhost:3000/'); }); ``` 运行这段脚本之后,浏览器访问地址栏键入 `http://localhost:3000/` 即可见到欢迎消息显示出来。 --- #### 总结 综上所述,从理解概念出发经过实践演练最终达成目标——即顺利部署一套完整的 Node.js 基础设施用于支持现代化网页制作流程[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WalkerShen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值