windows10下安装和配置nodejs环境

news2024/11/19 1:39:25

一、下载安装node.js

  • 官方下载地址:下载最新LTS windows版本: 16.15.0 (includes npm 8.5.5)  Node.js ,如下图

  • 安装可以更改安装路径(我的是默认地址C:\Program Files\)

  • 其余的都是选择 下一步, 安装

 测试是否安装 成功

打开开始菜单中输入cmd,打开cmd命令窗口,分别输入如下命令

node -v 查看node的版本
npm -v 查看npm的版本(新版的node安装自带安装npm)

二、配置环境变量

配置全局安装的模块路径和缓存路径(不一定是安装路径)
本文是在安装目录的nodejs文件夹下,创建 node_global
本文是在安装目录的nodejs文件夹下,创建 node_cache

路径的配置命令

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

执行如下 

2.1配置环境变量


进入 “我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

选择 系统变量 创建 NODE_PATH 变量

变量名:NODE_PATH
变量值:C:\Program Files\nodejs\node_modules(安装的路径,node_modules 文件夹 安装后就会有的)

  • 在 系统变量 中 选择 Path 添加如下属性:

  • 把前半部分的nodejs路径换成自己的nodejs的路径

2.2测试安装 

 全局安装最常用的 express模块 进行测试

npm install express -g

 注意:执行上面命令,如果出现以下错误信息,则需要设置安装目录nodejs权限

 具体处理方式请查阅

解决: Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs\node_cache\_cacache‘_爱编码阿信的博客-CSDN博客

三、全局配置淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

四、全局安装webpack

npm install webpack -g

 执行命令后如果出现上图提示 ,则按提示要求升级npm版本,执行如下命令:

npm install -g npm@8.9.0

 到此环境配置完成

五、项目安装运行测试

5.1、在项目目录下打开命令行窗口,执行如下命令

npm install

然后检查项目目录下是否有node_modules目录,如果有则项目依赖环境安装完成

5.2、执行运行命令

npm run dev

出现如下日志,表示启动完成

访问提示的地址http://localhost:9527/ 

出现登陆界面

到此整个安装、配置、运行全部完成,感谢大家的阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409344.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序实现客服功能(客服消息)

纯前端操作&#xff0c;无后端接入的情况下实现此功能 1&#xff0c;需要一个按钮button&#xff0c;加上open-type“contact”属性 <button open-type"contact">咨询</button> 需在真机上测试&#xff0c;点击按钮就可以进入客服页面。 2&#xff0c…

猿创征文|前端之行,任重道远(来自大三学长的万字自述)

&#x1f9d1;‍&#x1f4bc;个人简介&#xff1a;本科大三学生、全栈领域优质创作者、华为云享专家、阿里云专家博主、第十三届蓝桥杯国赛三等奖获得者&#xff0c;拥有软件著作权1项。一个不甘平庸的平凡人&#x1f36c; &#x1f4d6; 前言 目前正值开学季&#xff0c;很多…

HTML系列之多媒体视频标签 video

文章の目录1、video 是什么了2、video的相关属性2.1、autoplay2.2、buffered2.3、controls2.4、loop2.5、muted2.6、height2.7、width2.8、preload2.9、src2.10、poster2.11、controlslist2.12、crossorigin2.13、currentTime2.14、disablePictureInPicture2.15、disableRemote…

web前端-JavaScript中的函数(创建,参数,返回值,方法,函数作用域,立即执行函数)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;web前端基础教程 &#x1f451;名言警句&#xff1a;海…

VsCode安装yarn:yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名

1.出现的问题&#xff1a; 在使用VSCode终端的时候&#xff0c;输入命令&#xff1a;yarn install &#xff0c;出现了问题: yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&…

Less预处理——变量和嵌套

系列文章目录 文章目录系列文章目录一、Less 变量1、选择器变量2、属性变量3、url 变量4、声明变量5、变量运算6、变量的作用域7、用变量去定义变量二、Less 嵌套1、& 的使用2、媒体查询3、小技巧&#xff1a;添加私有样式一、Less 变量 1、选择器变量 让选择器变成动态的…

ant design vue的table取消自带分页

在我们使用ant design vue的table组件的时候会发现&#xff1a; 组件使用如示&#xff1a; <a-table :columns"columns" :data-source"data" bordered></a-table> 显然并没有配置pagination属性&#xff0c;那为什么会出现分页器呢&#xff1…

Three.js基础入门系列(一)

01 Three.js前提须知 讲到 Three.js&#xff0c;就需要先说一下 OpenGL 和 WebGL。 OpenGL 是一个跨平台的3D/2D的绘图标准&#xff08;规范&#xff09;&#xff0c;WebGL&#xff08;Web Graphics Library&#xff09;是一种3D绘图协议。 WebGL允许把JavaScript和OpenGL 结…

uniapp 开发安卓App实现高德地图路线规划导航

文章目录技术概述技术详述问题与解决我的总结参考文献技术概述 描述这个技术是做什么的/什么情况下会使用到这个技术&#xff0c;学习该技术的原因&#xff0c;技术的难点在哪里。控制在50-100字内。 uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方…

21个超实用的 CSS 技巧分享(附图示)

本文中分享的所有CSS技巧都是来自GitHub代码库“css tips tricks”的手工精选&#xff0c;此代码库专为开发者提供专业的CSS技巧。1、文档布局使用仅两行CSS代码&#xff0c;创建一个响应式的文档布局。这个布局风格类似于文档页面&#xff0c;可以很好地展示各种信息。.parent…

【JavaScript】基于querySelector / querySelectorAll对元素的操作,为你的DOM API基础扫盲~

目录 一、通过querySelector / querySelectorAll获取元素 1.1 单个标签选中 1.2 多个标签选中 二、基于这组DOM API&#xff0c;对元素进行操作 2.1 innerHTML获取/修改元素内容 2.2获取/修改元素属性 三、单标签元素属性的获取和修改 3.1 value 3.2checked 3.3 type …

网上蛋糕商城JSP页面

首先是一个注册页面&#xff1a; 视图如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html> <head><title>用户注册</title><meta name"viewport" content"widthdevice-width, initial-scale1"><meta …

前端案例:像素鸟小游戏(js+dom操作,完整代码,附案例素材)

目录 一、案例效果 二、实现思路 三、完整代码详细注释 四、案例素材 一、案例效果 二、实现思路 创建游戏背景板和小鸟&#xff0c;并分别设置相对定位与绝对定位&#xff1b;初始化背景图的位置&#xff1b;初始化小鸟的位置&#xff1b;设置游戏状态&#xff0c;游戏开…

vue 的表单验证

1.使用<el-form>包裹整个表单 在其中使用:model 绑定数据 和 :rules绑定校验规则 <el-form :model"user" :rules"rules"> ...................................... </el-from> 2.在script中添加使用数据 以及 校验规则&#xff08;都添加…

Chrome浏览器中清除特定网站的Cookie数据

背景&#xff1a;当我们在网站上遇到错误时&#xff0c;经常会用到的一个方法就是清除Cookie&#xff0c;清除网站的Cookie和网站数据来重置本地的缓存&#xff0c;很多客户端引起的错误都可以使用该方法修复&#xff0c; 但是在清除Cookie时有一个问题是使用浏览器更多中的清…

css实现文字大小自适应

在页面编写中经常会碰到页面自适应的问题&#xff0c;也就是页面内部的元素会随着窗口的放大缩小而放大缩小&#xff0c;box可以通过calc 百分比的形式做到页面自适应&#xff0c;但是box内的字体却无法做到这点&#xff0c;往往box自适应大小了&#xff0c;内部的字体还是原来…

一行代码“黑”掉任意网站

文章目录只需一行代码&#xff0c;轻轻一点就可以把任意网站变成暗黑模式。 首先我们先做一个实验&#xff0c;在任意网站中&#xff0c;打开浏览器开发者工具(F12)&#xff0c;在 C1onsole 控制台输入如下代码并回车&#xff1a; document.documentElement.style.filterinve…

使用npm安装yarn

很多同学用惯了npm安装项目依赖&#xff0c; 想要尝试使用yarn的命令&#xff0c; 但是第一次使用yarn的时候&#xff0c;发现报错&#xff0c; 这是什么情况呢&#xff1f; 因为&#xff0c;想要使用yarn&#xff0c;需要首先安装yarn。 那么问题来了&#xff0c;如何安装呢…

IDEA 创建Maven Web项目

背景 公司有一个非常老的项目&#xff0c;决定进行简单重构&#xff0c;纳入自动化流水线部署的序列。原项目采用很古老的Jar包依赖模式&#xff0c;也就是直接将jar包放在项目中。同时&#xff0c;项目结构也非常奇特&#xff0c;不是标准的Web项目目录结果。 于是&#xff…

用vue实现打印页面的几种方法

1.第一种就是直接调用 window.print()方法 这种方法的坏处就是 默认打印整个页面&#xff0c;不能打印局部页面。 2.第二种使用v-print 首先先下载 npm install vue-print-nb --save 然后在main.js中引入 main.js中引入 import Print from vue-print-nb Vue.user(Print)由于…