本文介绍: Node.js和Vue安装配置(超详细步骤

一、下载

Node.js官网下载
大家根据自己系统进行下载安装包(我的电脑windows10-64位,所以下载第一个
在这里插入图片描述

二、安装

点击下载的安装包进行安装
在这里插入图片描述
点击Next
在这里插入图片描述

打勾并点击Next
在这里插入图片描述
默认安装路径是C:Program Filesnodejs,我这里选择在D:Program Filesnodejs目录下安装,点击Next
在这里插入图片描述
点击Next
在这里插入图片描述

点击Next
在这里插入图片描述

点击Install
在这里插入图片描述
安装完成点击Finish
在这里插入图片描述
安装完成后Node.js自动node配置环境变量中,我们打开Windowscmd窗口输入nodev查看node版本
在这里插入图片描述
输入npmv看到npm版本
在这里插入图片描述

三、配置

cmd窗口输入npm rootg查看全局安装的模块所在目录
在这里插入图片描述
在安装的目录新建两个文件夹node_cachenode_global
在这里插入图片描述
打开cmd命令窗口,配置全局安装的模块路径(注意”D:Program Filesnodejsnode_global“是我电脑上的安装路径,你们以自己电脑实际安装路径进行替换
npm config set prefix “D:Program Filesnodejsnode_global
在这里插入图片描述

配置缓存路径(注意路径)
npm config set cache “D:Program Filesnodejsnode_cache”
在这里插入图片描述

cmd窗口输入npm rootg即可看见全局安装的模块路径已经切换我们配置的路径了
在这里插入图片描述
为了之后使用npm下载东西时速度快一些,需要配置镜像站,这里选择淘宝镜像打开cmd输入

npm config set registry=http://registry.npm.taobao.org

在这里插入图片描述
输入npm config get registry输出http://registry.npm.taobao.org/即表示配置成功
在这里插入图片描述

现在配置一下Node.js环境变量设置环境变量的目的是在任何目录可以执行nodevue命令
windows10可以使用搜索功能搜索环境变量点击编辑系统环境变量
在这里插入图片描述
点击环境变量
在这里插入图片描述
找到Path,点击编辑
在这里插入图片描述
点击新建,我电脑的node_global路径是”D:Program Filesnodejsnode_global“,配置完成后点击确定,关闭环境变量配置的所有窗口
在这里插入图片描述

四、安装配vue

输入npm info vue查看是否能够获取vue信息这里下图错误需要使用windows PowerShell管理员模式
在这里插入图片描述
右键左下角的windows图标选择windows PowerShell(管理员),输入npm info vue即可
在这里插入图片描述
在这里插入图片描述
输入npm install vue -g 开始安装vue
在这里插入图片描述
输入npm i @vue/cli -g 开始安装Vuecli脚手架
在这里插入图片描述

五、构建运行Vue项目

我在D盘创建一个demo目录,在命令行使用cd D:demo进入到了demo目录,准备构建一个vue项目
在这里插入图片描述
输入vue create first,出现下面的提示,让选择创建Vue3还是Vue2的项目,我这里选择Vue3直接回车
(注意这里可能出现“vue : 无法加载文件 D:Program Filesnodejsnode_globalvue.ps1,因为在此系统上禁止运行脚本。”的问题解决方案参考我的这篇文章https://blog.csdn.net/qq_35156196/article/details/127576640?spm=1001.2014.3001.5502)
在这里插入图片描述
这张图片vue项目已经构建好了
在这里插入图片描述
输入cd first,再输入npm run serve即可成功运行vue项目
在这里插入图片描述
打开浏览器输入http://localhost:8080/即可访问vue页面
在这里插入图片描述

原文地址:https://blog.csdn.net/qq_35156196/article/details/127579116

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_19551.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注