安装node.js + 搭建vue环境 + 安装脚手架 + 构建vue项目的详细教程

原创

已于 2022-06-01 14:11:40 修改 · 1.1w 阅读

104 ·

CC 4.0 BY-SA版权

文章标签：

#vue脚手架 #vue项目构建 #vue环境配置 #安装node.js #idea启动vue项目

于 2018-12-11 12:32:38 首次发布

本文提供了一步步的教程，从安装node.js开始，详细讲解如何配置npm仓库，设置淘宝镜像，安装vue及其相关依赖，使用vue脚手架创建项目，并在开发工具中启动vue项目。涉及关键步骤包括：改变npm本地仓库目录，配置淘宝镜像站，全局安装vue、vue-router和vue-cli。

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

搭建vue开发环境的时候在网上找了几个教程，还是遇到了几个坑，所以写下这篇可以让你从零开始一步一步跟着本篇博客搭建好环境，顺利直接进行vue开发的步骤。

第一步：安装node.js

先去官网下载node.js，如下图，根据自己的电脑选择安装包下载，我的电脑是windows 64位的，所以选了下图红色框的。

下载完成之后，点击下载好的安装包进行安装，安装过程全部直接点next，不用勾选其他，直到安装完成。
安装完成之后，打开dos(windows+R或者直接windows键打开，输入cmd，按回车键)窗口，输入命令node -v可以查看安装的node.js版本
在这里插入图片描述
node.js自带npm(包管理)安装完成之后，npm本地仓库默认在 C:\Users\Administrator\AppData\Roaming 目录下(可以再cmd窗口输入where node查看自己的安装地址)。注：有的电脑会自己隐藏文件夹，可以复制上面的目录地址在自己电脑上直接进入。看到如下图的两个文件夹：npm和npm-cache
在这里插入图片描述
接下来就是将上面的npm和npm-cache移动到node.js的安装目录下。靠命令来移动！不是手动移。跟着下面第二步来移动

第二步：改变npm本地仓库目录

1.先找到自己的node.js安装目录，不记得安装目录的，可以在dos窗口输入where node查看。如图：
在这里插入图片描述
可以去这个目录下看以下是否有node.js，如图都是有的

2.现在在node.js目录下手动新建两个名字为node_cache和node_global空文件夹，注意是空的文件夹，如图：