【Vue从入门到进阶】Node.js安装与配置

news2025/7/11 7:13:58

✅作者简介:CSDN一位小博主,正在学习前端,欢迎大家一起来交流学习🏆
📃个人主页:白月光777的CSDN博客
🔥系列专栏:Vue从入门到进阶
💬个人格言:但行好事,莫问前程

在这里插入图片描述

Node.js安装与配置

  • 卸载node.js
  • 安装node.js
    • 配置Node.js环境(NPM全局安装路径)
    • 添加环境变量
    • 使用npm全局安装进行测试
  • 全局安装淘宝镜像的cnpm
    • 使用cnpm安装express测试是否安装成功
  • 结束语💬

卸载node.js

以windows10电脑为例,打开此电脑—卸载与更改程序找到node.js卸载即可

在这里插入图片描述
然后删除node的相关文件夹(node_chche node_global)

在这里插入图片描述
最后打开cmd执行npm -v看看是否卸载成功

在这里插入图片描述

安装node.js

node.js官网: https://nodejs.org/zh-cn/

在这里插入图片描述

双击打开安装程序
在这里插入图片描述
点击Next

在这里插入图片描述
勾选接受协议点击Next

在这里插入图片描述

自定义node.js安装位置点击Next

在这里插入图片描述
点击Next

在这里插入图片描述
点击Next

在这里插入图片描述
点击Install

在这里插入图片描述
点击finish

在这里插入图片描述
打开cmd窗口输入对应代码查看是否安装成功,如果没有报错即为安装成功

在这里插入图片描述

配置Node.js环境(NPM全局安装路径)

如果希望将全局模块所在路径和缓存路径安装在Node.js安装的文件夹中,例如安装的文件夹为D:nodejs,就需要在此文件夹下创建两个文件夹,分别为node_globalnode_cachel

在这里插入图片描述
创建完以下两个文件夹,打开cmd窗口,输入以下命令并执行

npm config set prefix “E:\nodejs\node_global”
npm config set cache “E:\nodejs\node_cache”

在这里插入图片描述

添加环境变量

找到此电脑—>属性—>高级系统设置—>环境变量,打开编辑

在这里插入图片描述

找到node.js的node_global路径添加进去
在这里插入图片描述

使用npm全局安装进行测试

以全局安装webpack为例,cmd输入以下代码执行

npm install webpack -g

💡注意
若执行npm install webpack -g出现以下错误

在这里插入图片描述
是由于对该文件夹进行操作的权限不够,右击nodejs文件夹—>属性—>安全点击编辑,将所有权限都打开即可

在这里插入图片描述
如果应用以后又出现了以下报错无法枚举容器中的对象,访问被拒绝,如果成功了请忽略此步骤

在这里插入图片描述

右击nodejs文件夹—>安全—>高级

在这里插入图片描述
点击更改—>高级

在这里插入图片描述
点击立即查找—>选择第二个点击确定

在这里插入图片描述
勾选标记的两项点击确定即可解决此问题

在这里插入图片描述
cmd再次输入npm install webpack -g进行安装,安装成功✨✨✨

在这里插入图片描述
进入E:\nodejs\node_global\node_modules查看安装的模块(安装的模块都存放在此路径下)

在这里插入图片描述

全局安装淘宝镜像的cnpm

CPM命令是从国外服务器下载,速度往往比较慢,我们可以选择安装CNPM加快下载速度(类似与Python中的换源

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

查看镜像地址看是否配置成功

npm config get registry

在这里插入图片描述
如上图所示,淘宝镜像配置成功✨✨✨

使用cnpm安装express测试是否安装成功

cnpm install express -g

在这里插入图片描述

若下载出现以上问题,进入nodejs安装目录找到cnpm文件夹位置,将其移动到cpm所在文件夹下

cnpm位置

在这里插入图片描述

npm位置

在这里插入图片描述

移动之后:

在这里插入图片描述
cnpmcnpm.cmd 文件移至 npmnpm.cmd 所在的文件夹

cnpm和cnpm.cmd原位置
在这里插入图片描述

移动之后:

在这里插入图片描述
cmd输入cnpm install express -g安装express模块

在这里插入图片描述

进入E:\nodejs\node_global\node_modules查看安装的express模块

在这里插入图片描述

结束语💬

以上就是Vue入门到进阶之Node.js安装与配置,如有问题欢迎一起交流
你们的支持就是博主创作的动力💕💕💕

在这里插入图片描述

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

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

相关文章

OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4 最近 OpenAI 犹如开挂一般,上周才刚刚推出GPT-3.5-Turbo API,今天凌晨再次祭出GPT-4这个目前最先进的多模态预训练大模型。与上一代GPT3.5相比,GPT-4最大的飞跃是增加了识图能力,并且回答准确性也得到显著提高。…

使用SpringBoot一小时快速搭建一个简单后台管理(后端篇)

不好意思让大家久等啦,最近也是因为学期末了,事情多了一点,所以更新的比较慢,请大家谅解下~ 好了话不多说,进入今天的教程环节 本次案例一共两篇文章教学: (第一篇):数据…

聊聊vue3的defineProps、defineEmits、defineExpose

最近在开发中用到了vue3的defineProps、defineEmits和defineExpose&#xff0c;感觉发现新大陆一般&#xff0c;所以利用闲碎时间对这三个方法做个总结。 defineProps const props defineProps<{foo: String,bar?: Number }>()defineProps 是vue3的写法并且是一个仅 …

Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器

本文首发&#xff1a;《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》 Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一&#xff0c;也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染&#xff0c;在引入 Video.js 后&#xff0…

idea连接SQL Server数据库

数据库配置 1.安装数据库&#xff1a;自行安装 我的SQL Server版本为2019 2.登录数据库&#xff0c;登陆方式有两种&#xff0c;连接数据库选择SQLServer身份验证 1.windows登录&#xff0c;直接登录 2.SQLServer登录&#xff0c;需要输入用户名和密码&#xff0c;默…

【Vant Weapp】van-cell 单元格

目录 自定义内容​​​​​​​ 自定义右侧value&#xff08;姓名手机号&#xff09; 自定义右侧value&#xff08;文件预览&#xff09; 自定义下方label描述信息 真机border相当明显 修改样式&#xff08;下边框、文字&#xff09; 循环列表中的cell 自定义内容 自定义…

前端必学 - 大文件上传如何实现

前端必学 - 大文件上传如何实现写在前面问题分析开始操作一、文件如何切片二、得到原文件的hash值三、文件上传四、文件合并技术点总结【重要】一、上传文件&#xff1f;二、显示进度三、暂停上传四、Hash有优化空间吗&#xff1f;五、限制请求个数六、拥塞控制&#xff0c;动态…

Vue+element ui实现好看的个人中心

目录一、效果图二、项目结构三、界面效果和代码实现1.路由注册2.个人主页实现3.编辑弹窗按钮实现4.个人简介实现5.发贴页实现6.收藏页实现7.关注和收藏页实现四、总结一、效果图 仿照原神社区的个人中心写了个个人中心界面&#xff0c;下图分别为原神社区个人中心主页和我画的…

vue项目天地图使用

最近的项目中遇到了新的需求&#xff0c;需要在项目中使用天地图&#xff0c;因为第一次接触&#xff0c;官方的网站引用之类的也没有进行详细的介绍&#xff0c;自己去找的时候发现这部分的文章也比较少&#xff0c;有的问题也没有讲清楚&#xff0c;所以发布这篇文章分享总结…

关于将tomcat卸载干净

这学期我们开始学习Java Web技术&#xff0c;要求安装tomcat&#xff0c;我到官网上下载的时候不小心下载了最新的测试版&#xff0c;但是安装的eclipse无法配置最新班的tomcat&#xff0c;就开启了我的下载、卸载之旅&#x1f62d;&#x1f62d; 在此之前也有在网上找了很多相…

小程序怎么自定义导航栏,导航栏放图片、设置高度

今天来说一下小程序的自定义导航栏。 1、设置导航栏style为custom&#xff1a; 2、这是刷新页面&#xff0c;页面的内容就跑到了页面的顶端&#xff0c;不留丝毫间隙&#xff1a; 3、然后定义一个components&#xff0c;就是我们自定义的导航栏组件&#xff1a; &#xff…

Vue3 + Element Plus 按需引入 - 自动导入

文章目录1 前言1.1 目的1.2 最终效果2 准备工作3 按需引入3.1 安装插件3.2 修改 vite.config.ts 文件4 其他4.1 ElMessageBox 使用时报错4.1.1 Eslint 报错&#xff1a; ElMessageBox is not defined.eslint(no-undef)4.1.2 TS 报错&#xff1a; Cannot find name ElMessageBox…

html设置背景颜色以及背景图片

背景颜色 backgroud-color:transparent color transparent : 背景色透明 color : 指定背景颜色 直接设置标签的style属性&#xff08;行内样式&#xff09; 例&#xff1a;将这个段落的背景设为红色 用选择器进行设置&#xff08;内嵌样式、外链样式&#xff0…

做技术,最忌讳东张西望

又好长时间没更新&#xff0c;研二了&#xff0c;忙着做实验、写论文、发论文&#xff0c;再加上给我导做一些事情&#xff08;都习惯了&#xff0c;以前很不爽的事情&#xff0c;现在居然能这么平静的说出来&#xff09;。 但这不是我今天说的重点&#xff0c;而是另外一件事…

3 分钟掌握 Node.js 版本的区别

在我们日常开发中&#xff0c;Node.js 使用场景越来越多&#xff0c;大到服务端项目&#xff0c;小到开发工具脚本&#xff0c;所以掌握 Node.js 一些基础知识是非常有必要的。 今天主要聊一下 Node.js 中 LTS 和 Current 的区别和如何选择合适的版本。 一、版本介绍 在官网上…

vue使用jsMind(思维导图)

前言 jsMind 是一个显示/编辑思维导图的纯 javascript 类库&#xff0c;其基于 html5 的 canvas 进行设计。 我们使用它可能需要在网页上单纯的使用这种图样的效果&#xff0c;而其他交互却是自定义的&#xff0c;我这边选择的是jsMind 与 网上的一个jsmind.menu.js&#xff…

Node.js 全网最详细教程 (第一章:Node学习入门必看教程)

1&#xff1a;Node的学前必知&#xff1a; 1: 在学习node之前&#xff0c;想必你应该学习过HTML&#xff0c;CSS&#xff0c;JavaScript 2: 浏览器中的JavaScript由两部分组成&#xff1a;JS核心语法和WebAPI JS核心语法WebAPI变量&#xff0c;数据类型DOM操作循环&#xff0…

Nginx静态资源部署

目录 Nginx静态资源概述 Nginx静态资源的配置指令 listen指令 server_name指令 location指令 设置请求资源的目录root / alias index指令 error_page指令 静态资源优化配置语法 Nginx静态资源压缩实战 Gzip模块配置指令 Gzip压缩功能的实例配置 Gzip和sendfil…

geoserver发布地图服务

geoserver发布地图服务发布wmts服务发布样式发布映像服务发布要素服务发布wmts服务 新建工作空间 保存后点击工作区 将shp文件上传到服务器 发布geoserver 服务 选择数据存储-》添加新的数据存储 这时可以选择两种方式 一种是直接将整个shp文件导入&#xff0c;一种是一…

【TS】object类型

object是一个对象&#xff0c;在ts中定义对象类型的语法为&#xff1a;let 变量名 &#xff1a;object { } 在object类型中&#xff0c;对象内部定义的值是不受类型约束的&#xff0c;只要是一个object类型即可&#xff0c;例如&#xff1a; let obj : object {name : 艺术概…