Vue下载安装步骤的详细教程(亲测有效) 1

article/2025/9/29 9:23:26

目录

一、【准备工作】nodejs下载安装(npm环境)

1 下载安装nodejs

2 查看环境变量是否添加成功

3、验证是否安装成功

4、修改模块下载位置

(1)查看npm默认存放位置

(2)在 nodejs 安装目录下,创建 “node_global” 和 “node_cache” 两个文件夹,

(3)修改默认文件夹,

(4)测试默认位置是否更改成功

解决报错:执行命令npm install express -g失败

二、 【准备工作】 设置淘宝镜像

1、将npm默认的registry修改为淘宝registry

2、全局安装基于淘宝源的cnpm

解决问题:执行npm install cnpm-g没报错,但也没出现cnpm文件夹怎么弄


一、【准备工作】nodejs下载安装(npm环境)

注意:node版本必须大于8.9。

下载地址Node.js

1 下载安装nodejs

(1)下载安装包

(2)双击安装包,点击Next,勾选使用许可协议,点击Next,

选择安装位置(可根据个人情况更换路径,我这里选择安装在D:\my_ruanjian\nodejs)

 继续点击Next,这里不用选择安装其他的插件,直接点下一步点击Next,

点击Install,点击 Finish(完成)按钮退出安装向导。 

 

2 查看环境变量是否添加成功

(1)进入环境变量,编辑【系统变量】下的变量【Path】,检测PATH环境变量是否配置了Node.js,

 可以看到已经有环境变量了。

3、验证是否安装成功

进入cmd命令行窗口,输入node -v查看nodejs版本,

node -v

(2)输入npm -v查看npm版本,

npm -v

如下图所示,即为安装成功,

ok,说明已经安装成功了。

4、修改模块下载位置

此步骤修改以后npm全局下载模块的保存位置,可根据自身情况选择是否更改。

(1)查看npm默认存放位置

使用npm get prefix查看npm全局模块的存放路径,

npm get prefix

使用npm get cache查看npm缓存默认存放路径,

npm get cache

如上图所示,npm 全局模块存放位置以及cache的存放位置,默认是在 C 盘 “C:\Users\用户\AppData” 下。

(2)在 nodejs 安装目录下,创建 “node_global” 和 “node_cache” 两个文件夹,

(3)修改默认文件夹,

设置全局模块的安装路径到 “node_global” 文件夹,

npm config set prefix "D:\my_ruanjian\nodejs\node_global"

设置缓存到 “node_cache” 文件夹,

npm config set cache "D:\my_ruanjian\nodejs\node_cache"

如下图所示:

注意:

(1)由于 node 全局模块大多数都是可以通过命令行访问的,还要把【node_global】的路径“D:\my_ruanjian\nodejs\node_global”加入到【系统变量 】下的【PATH】 变量中,方便直接使用命令行运行,如下图所示:

(2)在“系统变量”中新建一个名为NODE_PATH的变量,变量值为 node安装目录,

 依次点击“确认”退出环境变量界面

(3)在nodejs的安装目录中找到node_modules\npm\npmrc文件(windows中文件名不带点(.)),修改如下,

 

 如此修改后,将模块全局安装的默认路径修改到NodeJS下,且程序能正常访问到。

(4)测试默认位置是否更改成功

经过上面的步骤,nodejs下载的模块就会自动下载到我们自定义的目录,接下来我们测试一下是否更改成功。输入下面的命令:

npm install express -g
或者
npm install express --global

注意:“-g”等同于“–global”,“-g” 是全局安装,不加“-g”就是默认下载到当前目录。

“-g” 表示安装到之前设置的【node_global】目录下,同时nodejs会自动地在node_global文件夹下创建【node_modules】子文件夹, 即自动下载到“D:\my_ruanjian\nodejs\node_global\node_modules” 路径下。

解决报错:执行命令npm install express -g失败

若执行命令npm install express -g出现如下报错:

原因:是由于对文件夹操作的权限不够,

解决方法

(1)删除C:\Users\Administrator下的.npmrc文件(若不知道文件路径在哪,用cmd 搜索下即可)

删除.npmrc文件后执行以下命令,

npm cache clean --force

(2)右击Nodejs文件夹->属性->安全,点击编辑,将所有权限都✔即可。 

 再次执行,

npm install express -g
或者
npm install express --global

 ok,问题成功解决。

如果执行npm install express -g仍然出错的话继续将nodejs下【node_cache】、【node_global】、【node_modules】这三个文件夹的所有权限勾选,再次执行。

 express模块成功,然后在文件管理器中查看是否保存到上面自定义的路径下,

 

可以看到,express模块已经成功地下载到【E:\devTools\nodejs\node_global\node_modules】下。

二、 【准备工作】 设置淘宝镜像

1、将npm默认的registry修改为淘宝registry

说明:npm 默认的 registry ,也就是下载 npm 包时会从国外的服务器下载,国内下载会很慢,一般更换为淘宝镜像:https://registry.npm.taobao.org。

(1) 查看当前使用的镜像路径,

npm config get registry

(2)更换npm为淘宝镜像,

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

然后检查镜像是否配置成功,再次执行npm config get registry,检查当前的镜像路径,

npm config get registry

如上图所示,npm默认的registry已修改为淘宝registry。

2、全局安装基于淘宝源的cnpm

说明:由于npm的服务器在海外,所以访问速度比较慢,访问不稳定 ,cnpm的服务器是由淘宝团队提供,服务器在国内,cnpm是npm镜像,一般会同步更新,相差在10分钟,所以cnpm在安装一些软件时候会比较有优势。但是cnpm一般只用于模块安装,在项目创建与卸载等相关操作时仍使用npm。

(1)全局安装基于淘宝源的cnpm,

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

解决问题:执行npm install cnpm-g没报错,但也没出现cnpm文件夹怎么弄

原因:应该是模块全局模式(-g)下的默认安装路径,没有配置成功,导致又安装到了c盘下。

解决方法

(1)查看自己的系统Path变量,如果没有,就增加如下路径:

在“系统变量”中新建一个名为NODE_PATH的变量,变量值为 node安装目录,

(2)在nodejs的安装目录中找到node_modules\npm\.npmrc文件(windows中文件名带点(.)),修改如下:

registry=https://registry.npm.taobao.org/
prefix=${NODE_PATH}\node_global
cache=${NODE_PATH}\node_cache

同时,还要修改C盘用户文件夹下的这个.npmrc文件,

 

总之,修改所有能找到的.npmrc文件(我由于第一次安装失败,导致我一共修改了3个.npmrc文件),都进行修改才能模块全局安装的默认路径修改到NodeJS下,且程序能正常访问到。

(3)重新执行安装命令,

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

本地查看cnpm模块是否安装成功,

 (2)本地查看cnpm模块是否安装成功,

或者,执行命令查看cnpm是否安装成功,

cnpm -v

如下图所示,即代表cnpm配置成功。


http://chatgpt.dhexx.cn/article/YRKNZfZ3.shtml

相关文章

MySQL 免安装版的下载与配置教程

文章目录 前置附录MySQL 常用命令 事先准备下载 MySQL卸载 MySQL安装 MySQL设置 MySQL 开机自启动远程访问 MySQL使用 MySQL Workbench 远程访问 MySQL使用 Navicat Premium 远程访问 MySQL使用 DataGrip 远程访问 MySQL 后置附录MySQL 的配置文件数据库存放目录 笔者的运行环境…

Vue+MySQL+Springboot

文章目录 一、Vue前端1. 去官网下载Nodejs,如果希望稳定的开发环境则下LTS2. 安装好后winr输入node -v查询是否安装成功3. 高版本的nodejs自带npm,则不必再下载,查询命令npm -v4. 由于在国内使用npm是非常慢的,所以在这里我们推荐…

Vue.js下载与安装

windows系统 1. 特点 Vue.js:是一套构建用户界面的渐进式框架 Vue:只关注视图层,采用自底向上增量开发的设计 Vue:目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件 2. Vue.js的下载与安装 1)下载安装No…

MySQL的下载、配置(手把手)

一、MySQL下载 首先到官网下载MySQL,下载链接:https://downloads.mysql.com/archives/community/ 进入到页面: 选择你需要使用的MySQL版本(我这里选择5.7.24,比较稳定的版本)选择你的操作系统(windows&a…

vue+nodejs+mysql上线部署(服务器CentOS8)

一.Liunx配置安装node(环境配置) 建software文件夹 mkdir /opt/software 2.进入software文件夹 cd /opt/software 3.查看服务器系统,下载相应的node版本 uname -a 去nodejs 官网,找nodejs linux的下载链接 (推荐下载node-v16.5.0版本&#x…

[记录六]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——服务端图片上传与下载

大家好,我是小佑小佐:https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。 前言:本项目需要涉及前端上传图片与显示图片&#xff…

Vue.js 最新官方下载地址与项目导入

目录 VUE2下载网址 VUE2使用示例&#xff1a; VUE3下载与使用 VUE3示例&#xff1a; 在官网上下载vue.js或者是vue.min.js。并用<script>标签引入。 应小伙伴要求区分一下版本&#xff1a; VUE2下载网址 Installation — Vue.jsVue.js - The Progressive JavaScrip…

vue.js下载及安装的三种方法

vue.js下载及安装的三种方法 要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了&#xff0c;下面给大家介绍三种安装vue的方法。 1.直接在官网上下载 在官网上下载vue.js。并用<script>标签引入。 注意&#xff1a;下载时网址是 https://vu…

vue下载

第一步&#xff1a; 安装 node.js &#xff08;如果已安装就不用装了&#xff0c;当然如果你想安装最新版本的node.js最好是从新安装一遍&#xff09; node.js安装官网地址 https://nodejs.org/zh-cn/ 安装完成之后 winr 键 打开运行 输入cmd 打开命令行窗口 输入 node -v …

vue+node.js+express+axios实现连接mysql数据库(前后端分离,详细版)

这两个星期都在学vue技术&#xff0c;感觉真的是博大精深啊&#xff01; 今天&#xff0c;我给大家总结了用axios连接数据库的步骤&#xff0c;让大家少走弯路&#xff08;不像我&#xff0c;我用axios连了两天才连接成功。。。&#xff09; 1、首先&#xff0c;确保你已经有了…

VUE下载及安装

下载node.js node.js下载 &#xff0c;选择长期维护版安装NODE&#xff0c;直接全部默认&#xff0c;不要安装在C盘设置NODE 在nodejs安装路径下&#xff0c;新建node_global和node_cache两个文件夹&#xff0c;这是npm安装的全局模块所在的路径&#xff0c;以及缓存cache的路径…

全网最新的vue.js下载和安装的3种方法(2023年)

文章目录 1. 文章引言2. 环境搭建3. 安装vue.js3.1 方法一&#xff1a;官网下载vue.js源代码3.2 方法二&#xff1a;使用npm install创建3.3 方法三&#xff1a;使用bower下载 4. 总结 1. 文章引言 我主要从事java后端开发&#xff0c;但对前端也非常感兴趣&#xff0c;立志成…

Vue连接MySql数据库

一、vue-cli2 全局安装 npm install vue-cli -g 局部安装项目 vue init webpack 项目名称 例如&#xff1a;vue init webpack demo1 二、express-generator 1.全局安装 npm install express-generator -g 2.express --viewejs 项目名称 例如&#xff1a;express --view…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

vue下载与安装详细教程

1、安装node&#xff08;网址&#xff1a;https://www.bilibili.com/video/BV1LA411u7dE?t10&#xff09; ①、进入node官网https://nodejs.org/zh-cn/ 点击下载&#xff0c;选择适配的 ②、 双击安装&#xff0c;安装路径随意&#xff0c;勾选第四项&#xff0c;把node添加进…

Vue下载与安装

首先安装node.js环境&#xff1a; node.js安装推荐文章&#xff1a;https://www.cnblogs.com/zhouyu2017/p/6485265.html 基于node.js安装淘宝镜像npm install -g cnpm --registryhttps://registry.npm.taobao.org 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd…

【Vue前端】Vue+MySQL(整体用到vue-vli、ElementUI)

提示&#xff1a;小白自学Vue前端&#xff0c;记录一些知识点 VueMySQL(整体用到vue-cli、ElementUI&#xff09; 目录一、相关准备1. 连接数据库2. 添加相关依赖 二、 使用步骤1. userApi.js2. db.js3. index.js4. server目录下新建sqlMap.js5. register.vue6. main.js7. 启动…

vue项目之js对Mysql数据库操作

vue项目之js对Mysql数据库操作 文章目录 vue项目之js对Mysql数据库操作前言一、相关插件安装二、搭建本地服务器三、启动服务器四、前端Vue访问接口进行数据交互结尾 前言 js对数据库的基本操作 一、相关插件安装 下载express&#xff0c;Express 的作用和 Node.js 内置的 htt…

Vue.js + express +mysql实现数据库增删改查

Vue.js express mysql实现数据库增删改查 1、 下载安装Node.js 在Node.js官网可下载 2、下载vue-cli脚手架 npm install vue-cli -g 3、 创建项目 后面是项目名称&#xff0c;在安装项目过程中需要选择安装vue-router vue init webpack mysqlconnect 4、安装vue-resource依赖…

vue、jdk、nodejs、maven、tomcat、git、MinGW、mysql、navicat下载与安装

常用Java工具配置操作 文章目录 常用Java工具配置操作一、Vue1.vue2.0安装与项目搭建1)基本环境安装2)项目搭建 2.vue3.0安装与项目搭建1)基本环境安装2)项目搭建 3.升级Vue3.0项目4.小操作 二、JDK三、NodeJs四、Maven五、Tomcat六、Git七、MinGW八、MySql1.下载mysql2.使用命…