Node.js和Vue的安装与配置（超详细步骤）_nodejs安装vue-程序员宅基地

技术标签： node.js vue 前端 vue.js

一、下载

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

二、安装

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

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

点击Next

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

点击Install
在这里插入图片描述
安装完成点击Finish

安装完成后Node.js会自动将node配置到环境变量中，我们打开Windows的cmd窗口输入node -v，查看node版本

输入npm -v，看到npm版本

三、配置

在cmd窗口输入npm root -g，查看全局安装的模块所在目录
在这里插入图片描述
在安装的目录下新建两个文件夹node_cache和node_global

打开cmd命令窗口，配置全局安装的模块路径（注意"D:\Program Files\nodejs\node_global"是我电脑上的安装路径，你们以自己电脑实际安装路径进行替换）
npm config set prefix “D:\Program Files\nodejs\node_global”
在这里插入图片描述

配置缓存路径（注意路径）
npm config set cache “D:\Program Files\nodejs\node_cache”
在这里插入图片描述

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

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

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

现在配置一下Node.js的环境变量，设置环境变量的目的是在任何目录都可以执行node和vue命令。
windows10可以使用搜索功能搜索环境变量，点击编辑系统环境变量
在这里插入图片描述
点击环境变量

找到Path，点击编辑

点击新建，我电脑的node_global路径是"D:\Program Files\nodejs\node_global"，配置完成后点击确定，关闭环境变量配置的所有窗口

四、安装配置vue

输入npm info vue，查看是否能够获取vue信息，这里报下图的错误话需要使用windows PowerShell管理员模式
在这里插入图片描述
右键左下角的windows图标选择windows PowerShell（管理员），输入npm info vue即可

输入npm install vue -g 开始安装vue

输入npm i @vue/cli -g 开始安装Vue-cli脚手架

五、构建运行Vue项目

我在D盘创建了一个demo目录，在命令行使用cd D:\demo进入到了demo目录，准备构建第一个vue项目
在这里插入图片描述
输入vue create first，出现下面的提示，让选择创建Vue3还是Vue2的项目，我这里选择Vue3直接回车
（注意这里可能出现“vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

前端框架们_阿里前端框架乌米-程序员宅基地

文章浏览阅读675次。我司打算搞个地图应用，领导发给我一份ppt，里面有个前端的技术架构图：what！前端技术都进化得这么复杂啦？就搞一个前端，至于用到这么多框架？就问你晕不晕！底部的es6，fetch是基础的语法，这个没什么好讲的。arcgis jsapi，是地图服务接口，也没什么好说的。webpack，打包工具，还行吧。顶部的echarts，经常用，很好用，不错。但ant design是蚂蚁金服的东东，与r..._阿里前端框架乌米

Turn on ClearType。打开ClearType看英文资料不再那么费眼。-程序员宅基地

文章浏览阅读64次。下面是微软提供的在线打开ClearType 网址，装好插件之后按提示一步一步的点下去。发现还是比较爽的。呵呵~http://www.microsoft.com/typography/cleartype/tuner/Step1.aspx转载于:https://www.cnblogs.com/zwwon/archive/2007/07/10/812598.html..._chrome 英文和数字显示cleartype

jQuery.template.js 简单使用-程序员宅基地

文章浏览阅读125次。之前看了一篇文章《我们为什么要尝试前后端分离》，深有同感，并有了下面的评论：我最近也和前端同事在讨论这个问题，比如有时候前端写好页面给后端了，然后后端把这些页面拆分成很多的 views，有时候还会在这些 view 中写一些 c# 代码，突然有一天前端页面的样式出错了，但前端那里并没有问题，然后后端把前端叫过来，说你在我这里调吧，因为你没有后端的调试环境，然后前端就会很不爽，然后。。。你懂的！..._/template/pc/skin/js/jquery.js

天池：零基础入门NLP - 新闻文本分类_天池学习赛零基础入门nlp - 新闻文本分类完成-程序员宅基地

文章浏览阅读256次。天池：零基础入门NLP - 新闻文本分类赛题理解解题思路赛题理解赛题链接：https://tianchi.aliyun.com/competition/entrance/531810/information划重点：字符级匿名处理（防止人工标注答案）、14个分类类别（0-13）、评价标准为类别f1_score的均值（越大越好）解题思路【难点】数据形式是匿名化字符，无法分词【分析】文本数据是典型的非结构化数据，可能涉及特征提取和分类模型两个部分【思路】TF-IDF + 机器学习分类器_天池学习赛零基础入门nlp - 新闻文本分类完成

使用conda安装gcc_your compiler (g++ 4.8.5) may be abi-incompatible -程序员宅基地

文章浏览阅读2.2w次，点赞18次，收藏38次。!! WARNING !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Your compiler (g++ 4.8.5) may be ABI-incompatible with PyTorch! Please use a compiler that is ABI-compatible with GCC 4.9..._your compiler (g++ 4.8.5) may be abi-incompatible with pytorch! please use a

python可以实现科学计算吗_python科学计算-程序员宅基地

文章浏览阅读470次。python科学计算NumPy 是科学应用程序库的主要软件包之一，用于处理大型多维数组和矩阵，它大量的高级数学函数集合和实现方法使得这些对象执行操作成为可能。科学计算的另一个核心库是 SciPy。它基于 NumPy，其功能也因此得到了扩展。SciPy 主数据结构又是一个多维数组，由 Numpy 实现。这个软件包包含了帮助解决线性代数、概率论、积分计算和许多其他任务的工具。此外，SciPy 还封装了..._python不能用于科学计算

随便推点

Could not connect to https://mirrors.tuna.tsinghua.edu.edu.cn/anaconda/pkgs/free/noarch/_could not connect to mirrors.tuna.tsinghua.edu.cn-程序员宅基地

文章浏览阅读5k次。解决方法：删除 .condarc文件。 .condarc以点开头，一般表示 conda 应用程序的配置文件，在用户的根目录（windows：C:\users\username\，linux：/home/username/）。但对于.condarc配置文件，是一种可选的（optional）运行期配置文件，其默认情况下是不存在的。 ..._could not connect to mirrors.tuna.tsinghua.edu.cn

MAC安装git的三种方式-程序员宅基地

文章浏览阅读1.7w次，点赞7次，收藏25次。以上是在MAC操作系统中安装Git的三种不同方式。Homebrew是最方便的方式之一，但如果您不想使用Homebrew，则可以选择从官方Git网站下载安装程序或使用Xcode Command Line Tools安装Git。无论您选择哪种方法，都应该能够很容易地安装和使用Git。_mac安装git

基于风控特征相关度，挖掘贷中等场景中的存量客户价值|来看看相关实操_风控建立存量客户的特征标签-程序员宅基地

文章浏览阅读836次。基于风控特征相关度，挖掘贷中等场景中的存量客户价值|来看看相关实操_风控建立存量客户的特征标签

Internet Download Manager v6.36 Build 3 Final 注册版-IDM下载工具_ternet_download_manager 注册版-程序员宅基地

文章浏览阅读1.9k次。亲测可用Internet Download Manager(简称IDM)下载速度最多达其他下载工具5倍的下载具。Internet Download Manager的续传功能可以恢复因为断线、网络问题、计算机当机甚至无预警的停电导致下传到一半的软件。此程序具有动态档案分割、多重下载点技术，而且它会重复使用现有的联机，而不需再重新联机登入一遍。聪明的in-speed技术会动态地将所有设定应用到某种..._ternet_download_manager 注册版

华为Java社招面试经历详解【已拿到offer】_广州华为java招聘-程序员宅基地

文章浏览阅读3.2k次，点赞4次，收藏28次。这篇文章主要介绍了华为Java社招面试经历,详细记录了华为java面试的流程、相关面试题与参考答案,需要的朋友可以参考下。看看自己能答对多少，如果能回答70%的题目，就大胆去阿里以及各互联网公司试试身手吧。本篇建议大家收藏、备用~华为Java社招面试（已拿到offer）之前月底华为cloudsop部门打电话叫我要不要面试，当时正处于换工作的期间，于是就把简历发给华为hr，人事审核后经过一些列面试、机试，最终顺利拿到了offer，出于未来职业规划的考量，本人手里还有其他的一些offer，还没有定下来，顺_广州华为java招聘

IDCNAR 账龄未清应收负数问题解决 F-51清账示意_sap idcnar-程序员宅基地

文章浏览阅读1k次。_sap idcnar