Vue环境搭建(node安装,环境配置,运行项目)

最新推荐文章于 2025-10-14 13:42:43 发布

原创最新推荐文章于 2025-10-14 13:42:43 发布 · 6.7k 阅读

34 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #node.js #java

java 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何搭建Vue开发环境，包括安装Node.js，配置环境变量，创建全局文件夹，更新npm配置，并通过cnpm安装Vue及相关依赖。在安装过程中，强调了版本匹配的重要性，以及遇到问题时如何解决，如修改package.json中不适用的版本号，重新安装。最后，说明了如何运行Vue项目并访问浏览器。

Vue环境搭建(node安装,环境配置,运行项目)

一、安装node

1、去官网下载node之后，推荐安装稳定版本（LTS）node官网下载地址
在这里插入图片描述

2、查看node安装成功否

node -v 查看node版本
npm -v 查看npm版本
where node 查看node安装位置

在这里插入图片描述
注意:node 版本号大于npm版本号，基于之前安装版本过低，后面会报错。

3、在node安装目录下新建node_global和node_cache文件夹，分别存放package包和缓存。
在这里插入图片描述

更新npm配置路径为新建目录路径，如：D:\nodejs
npm config set prefix “D:\nodejs\node_global”

npm config set cache “D:\nodejs\node_cache”

npm config set registry https://registry.npm.taobao.org（npm 运行慢，配置国内淘宝镜像包）后续包安装命令 npm 即可改为 cnpm

4、配置node的环境变量
我的电脑(属性)->高级系统设置->环境变量编辑-保存

编辑path环境变量，新增node安装路径
在这里插入图片描述
增加环境变量NODE_PATH 配置的内容为node_modules 路径

**以上已配置好node环境------------------------------------------------------------------

二、下面开始安装vue相关依赖**

1、安装vue
npm install vue -g

npm install vue-router -g

-g是指安装到node_global全局目录
在这里插入图片描述
2、安装vue-cli脚手架
npm install vue-cli -g

三、运行项目

1、从命令符进入项目所在目录，执行cnpm或npm install 安装相关包
在这里插入图片描述
2、然后执行cnpm run server 或 npm run 打包启动项目

运行完成后访问以下地址即可在浏览器成功访问该vue项目

可能出现的问题：

在执行cnpm install安装过程中可能出现安装失败的情况，例如：各个包可能存在停止使用的情况或版本对应错误问题
在这里插入图片描述
当出现依赖停止使用或版本不合适的情况时，首先在node_modules目录中找到该包，然后删除，再重新选择版本进行安装。
例如：

修改package.json中的存在问题版本号

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^6.0.1",/node-sass版本/
    "sass-loader": "^10.0.1",/sass版本对应/
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "^2.6.10"
  },