当前位置：首页 > news >正文

Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)

news 来源：原创 2025/6/8 11:17:45

目录

一、Vue环境检测以及配置淘宝镜像。

（1）node.js环境安装检测。

（2）npm环境安装检测。

（3）配置npm淘宝镜像。

二、Vue项目快速上手。

（1）Vue官网与快速上手。

（2）新建一个新目录并记住。

（3）依次按需求选择Vue可选功能提示。

（4）Vue初始化项目后按提示执行命令。(进入工程、安装所需依赖包)

三、卸载低版本node.js并安装更高且稳定版本。

（1）打开控制面板，找到卸载程序。

（2）找到node.js程序并点击卸载。

（3）继续卸载附带的全局变量与环境。

（4）官网下载对应稳定版本node.js。

（5）执行.msi文件安装node.js。

（6）输入指定命令检查新版本的node.js是否安装成功。

（7）重新设置npm的淘宝镜像。

（8）基础环境设置。

（9）执行命令查看命令基本环境配置结果。

（10）配置系统环境变量。

<1>编辑系统变量。

<2>编辑用户变量。

<3>再进入系统变量的Path下新建%NODE_PATH%。

四、博主重新尝试Vue快速上手。(番外)(成功启动Vue3新工程！)

一、Vue环境检测以及配置淘宝镜像。

使用管理员身份运行cmd。使用命令完成以下操作。

（1）node.js环境安装检测。

（2）npm环境安装检测。

（3）配置npm淘宝镜像。

npm（Node Package Manager）是 Node.js 的包管理工具，主要用于管理 JavaScript 的依赖包和模块。
它可以帮助我们下载Vue工程所需的依赖。其中npm默认从国外镜像下载所需依赖，所以需要配置国内的淘宝镜像，否则依赖下载速度非常慢。
配置方法：在命令行输入下面的指令即可。
#npm淘宝镜像地址
npm config set registry https://registry.npmmirror.com

#查看镜像配置状态
npm config get registry

二、Vue项目快速上手。

（1）Vue官网与快速上手。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助高效地开发用户界面。
Vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

直接点击主页的快速上手。

（2）新建一个新目录并记住。

我的目录：D:\Vue\VueCode2025\xmproject。

在cmd中进入到该目录下，执行快速上手提供的命令。
npm create vue@latest
（3）依次按需求选择Vue可选功能提示。

vue项目名称——vue0307。
不选择TypeScript语法。
不选择JSX。
选择引入Vue Router 进行单页面应用开发。（Vue路由管理）
不选择Pinia、不选择Vitest、不选择端到端测试工具、不选择ESLint。

（4）Vue初始化项目后按提示执行命令。(进入工程、安装所需依赖包)
#cd自己新建的vue名称
cd vue0307
npm install
npm run dev
执行第一条命令。进入到Vue工程内。

执行第二条命令。下载Vue工程所需依赖包。
报的黄色提示WARN（警告）不是报错，因为版本未统一造成的警告。不影响。

执行第三条命令。启动运行该Vue工程。
结果博主出师不利，出问题了，只能检查node.js版本问题再重新测试新的Vue工程。

当然如果你的node.js版本与依赖不冲突，肯定就可以运行成功。

三、卸载低版本node.js并安装更高且稳定版本。

（1）打开控制面板，找到卸载程序。

控制面板可以直接在搜索框搜索去打开。

（2）找到node.js程序并点击卸载。

（3）继续卸载附带的全局变量与环境。

可以通过命令：npm config list查看原本node.js安装的一些全局变量或依赖的下载目录。
C:\Users\86183\AppData\Roaming\npm。D:\nodejs。有关的目录全部删除干净。

当然若系统环境变量中也有相关配置也需一起删除。

（4）官网下载对应稳定版本node.js。

（5）执行.msi文件安装node.js。

找到之前官网下载好的node.js安装的目录。

同意协议说明。

修改安装目录。

选好自己的安装目录后即可。

点Next下一步。

继续Next——下一步。

点Next——下一步。

点击Install完成安装的开始。

等待一会。点击Finish即可完成node.js安装。

（6）输入指定命令检查新版本的node.js是否安装成功。

（7）重新设置npm的淘宝镜像。
#npm淘宝镜像地址
npm config set registry https://registry.npmmirror.com

#查看镜像配置状态
npm config get registry
（8）基础环境设置。

进入到安装node.js的根目录。
新建名为：node_cahe、node_global两个目录。

再以管理员身份进入cmd，并执行下面两个命令。
#依次执行下面两条命令
npm config set prefix 自己对应node_global 的目录

npm config set cache 自己对应node_cahe的目录
D:\nodejs\version20\node_global。
D:\nodejs\version20\node_cache。

（9）执行命令查看命令基本环境配置结果。
npm config list
（10）配置系统环境变量。

打开系统环境变量并进入。

<1>编辑系统变量。

设定变量名：NODE_PATH。

设定变量值：D:\nodejs\version20\node_global\node_modules。（也就是自己的node_global目录后追加node_modules）

为了以防万一。如果用的时候出问题，再给与之前创建的两个文件夹(node_cahe、node_global)最高权限。

<2>编辑用户变量。

编辑并替换成D:\nodejs\version20\node_global

修改后如下所示。

<3>再进入系统变量的Path下新建%NODE_PATH%。

然后一直点击确定、确定直到完成环境变量的配置和退出。
这样不出意外的应该完成了node.js的安装与环境配置的所有操作。（博主继续测试）