官网网站设计浙江网络推广公司
目录
一、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的安装与环境配置的所有操作。（博主继续测试）
四、博主重新尝试Vue快速上手。(番外)(成功启动Vue3新工程！)
- 把Vue快速上手的Vue项目基本环境搭建好。
- 依次按提示的命令运行。
- 最后进行启动测试。
- 访问地址：http://localhost:5173/
- 证明你成功创建了一个Vue3项目。后面可以使用IDEA编译器打开该Vue项目并启动。
