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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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"
  },

最后再次执行cnpm或npm install 安装,即可安装成功。
thanks

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值