一.Node.js安装

1.node.js下载

进入node.js官网下载，选择自己需要的版本，最好下载长期支持版，最新版可能不太稳定。

Node.js 中文网

2.node.js安装

下载完成后，开始双击打开安装包安装node.js。

勾选协议，然后next。

 一般情况下更改安装路径，我一般更改到D盘，然后新建文件夹nodejs，然后next。

然后开始添加组件和环境变量，这一步不用动。

最后一步不用勾选，直接next，然后一直点击安装即可。

3.安装测试 

 安装完成后，检查一下是否安装成功，按住Win+R输入cmd回车进入命令行窗口，输入下面命令查看版本号。

node -v

npm -v

如果成功输出版本号就没问题。

 

二、环境变量配置 

1.创建全局安装目录和缓存日志目录

新建两个文件夹node_cache和node_global

仍然打开cmd，执行下面命令 

npm config set prefix "自己的安装路径/node_global"

npm config set cache "自己的安装路径\node_cache"

到这一步，很多其他博客都会让更新为淘宝镜像，但是此时在今年2024年淘宝的npm镜像更新地址了，只能使用现有最新的地址，使用原来的地址会失败，下面是淘宝镜像的新地址：

npm config set registry https://registry.npmmirror.com

或者也可以不更新镜像，使用原有镜像只不过下载速度慢一些，也并没有什么大碍。 

然后查看npm配置修改是否成功

npm config list

2.配置用户变量和环境变量 

编辑环境变量

 在node_global文件夹中新建新文件夹node_modules，然后新建环境变量NODE_PATH

在系统变量path中添加%NODEPATH%

编辑用户变量

在用户变量path里面，找到

C:\Users\你的用户名\AppData\Roaming\npm 

然后改为

自己的安装路径/node_global

 三、快速安装Vue 

首先使用搜索工具搜索cmd，然后以管理员身份运行cmd，或者右键都可以管理员身份运行，然后才能执行安装。

1.安装vue.js 

npm install vue -g

2. 安装webpack

npm install webpack -g

 

npm install webpack-cli -g

 

输入 webpack -v，能输出版本号就说明就安装成功了。。

3. 安装脚手架vue-cli

npm install vue-cli -g

输入vue --version，能输出版本号就说明vue就安装好了。

4. 安装vue-router 

npm install vue-router -g

四、创建Vue工程项目

1.新建工程目录

在D盘或者桌面新建一个目录存放工程文件，然后复制文件路径，输入命令

cd 文件路径

2.创建基于webpack模板的vue项目

 vue init webpack 项目名

然后跟着下面的提示，依据自己的需求和实际情况来选择。 

3.启动项目

启动项目需要接着输入下面命令

cd 项目名

npm run dev 

 

在浏览器中输入http://localhost:8080就可以访问自己的vue项目了

五、在IDEA中配置访问自己的vue项目

先在IDEA中打开自己工程文件，然后在当前文件编辑配置文件

添加npm配置文件

 

 点击上方小虫子就可以运行了

 在浏览器中输入http://localhost:8080就可以访问自己的vue项目了

六、总结 

关于Vue最新版的安装就总结到这里了，如果小伙伴们安装过程中出现了什么问题，欢迎大家在评论区留言，我会及时回答大家的问题的。

长路漫漫，编程之路渐行渐远，相信不少小伙伴对未来计算机发展道路还很迷茫，计算机的就业道路很广泛，未来可以细分很多专业：

同时在当下人工智能、互联网快速发展的时代，我们计算机专业的就业方向也非常广泛，包括技术类、产品类、物计算机专业的就业方向非常广，联网、金融、游戏等领域。据统计，近年来计算机专业的就业率将保持在90%左右的水平，并且各个领域的需求将有不同程度的增长，总体来说未来发展还是欣欣向荣的。

在这里博主给大家推荐一本计算机专业就业宝典，扫码就可以领取，特别是对有出国意向的同学，时不我待，码上领取吧。