win10安装和搭建vue环境（超详细教程）Vue新手教程(1)：

PS：笔者为计科专业研一在读，最近打算学习Vue，踩了许多坑，在此将学习过程分享出来，后续还会持续更新。

一、安装Vue环境

首先，在安装Vue环境之前，我们首先需要安装npm这个玩意。

那么npm这个玩意是什么呢？官方的说法是：npm是基于Nodejs的资源包（package）管理器。

就好比你是一个顾客，想购买商品，而npm就是一个超市，里面有各种各样的商品，Vue就是其中的一个商品，你要想购买Vue这个商品就先要到npm这个商店去。因此我们首先来安装npm

1.1 安装npm 

npm是包含在nodejs里面的，考虑到项目后续的需要，我们不如直接安装nodejs更加省事，安装好了nodejs也就安装好了npm，因此我们首先访问nodejs的官网：Node.js

 我们选择左边这个版本，下载安装（默认为C盘，建议更改至其他空间）笔者将空间改为了D盘，在D盘下新建文件夹名为nodejs存储。

在安装过程中，请注意，我们一路点击next到这一步：

 笔者这里建议将Add to PATH选项去除，我们后续手动添加，原因是：笔者在安装时候默认勾选了该选项，导致实际添加进系统的环境变量仍然为C盘（猜测这可能是由于我们确实更改了默认安装路径从C盘改为了D盘，但是安装包这个程序本身的默认路径没有更改的原因），导致后续在使用npm相关命令的时候，仍会将相关安装包安装在C盘。

之后一路点击next，直至安装完成。

1.2 配置npm环境

为什么我们需要配置环境变量呢？环境变量我们就可以理解为软件的一个快捷方式，方便我们通过命令行的形式来操纵npm完成先关操作，当然如果我们不配置环境变量也完全可以，只不过使用起来不方便。

 依次进行如下操作：右键点击“计算机”，“高级系统设置”，“环境变量”，在这个界面下，在下方的“系统变量”中，找到“PATH”属性，点击编辑，点击新建，将nodejs的安装路径，笔者为：D:\nodejs\ ，添加至系统变量中。点击确定。至此我们的环境变量就配置完成。

之后我们在桌面搜索栏打开CMD命令行窗口，输入以下命令。

npm 
npm -v

出现以下信息则证明我们的npm安装和配置完成。

 1.3 更改npm资源包安装路径

到此为止，我们已经完成了npm的安装，由于npm全局模块的存放路径及cache的路径默认是放在C盘下，这样肯定会增加C盘的负担，使用npm install vue 等相关命令是，总是会将要安装的包安装到C盘，而我们希望的是将这些包统一安装到我们刚才创建的nodejs文件夹下面，方便管理。

这时候我们需要更改安装路径，在安装完npm后，在：C:\Users\PC 路径下，会出现一个名为

.npmrc的文件，我们打开它，将里面的路径改为我们刚刚创建的nodejs文件夹，具体如下：

我们只需要在刚刚的nojs文件夹中创建一个名为npm_cache的文件夹即可。

prefix=D:\nodejs
cache=D:\nodejs\npm_cache

 prefix是要安装的包的相关路径，cache是在后续安装过程中产生的缓存，可能会占用很多空间，不过可以直接删掉（笔者已经试验过，没有任何影响）

补充：如果没有找到这个文件，就在这个路径下面新建.npmrc这个文件，直接输入路径就好。

 1.4 安装vue

到这一步我们安装vue的前期工作都已经准备好啦（鼓掌）

依旧使用管理员身份打开CMD，输入：

npm install -g @vue/cli

 安装成功后，我们继续输入安装配套的webpack打包工具 

npm install -g webpack

之后我们在命令行输入

vue -V

就证明我们的vue已经安装好了 。

1.5 安装Hbuilder X 编辑器

笔者强烈推荐这个编辑器，这是Vue官方教程中配套的编辑器，非常轻量易上手，整个编辑器只有400M大小，而且配合Vue的插件和依赖都可以一键导入，十分方便。

Hbuilder X官方网站：HBuilderX-高效极客技巧  我们进入下载安装即可。

1.6 构建第一个Vue项目

我们依旧是打开命令行  输入 

vue ui

之后在浏览器界面会弹出vue 的图形化管理界面，如果没有自动打开，只需要将上述网址手动输入进浏览器即可。

 打开界面长这个样子（笔者已经新建了一个项目），我们首先新建一个文件夹存放我们的项目路径，之后点击下方的创建新项目。（笔者的路径为：E:\Hbuilder project）

 

 之后我们需要大概等待1~2分钟，等待项目初始化配置完成。在命令行窗口中我们可以看到安装的过程，安装结束后，界面会跳转到欢迎界面。可以看到左上角名为：test的项目我们已经创建好了。

1.7 将项目部署到本地浏览器运行

接下来我们需要将项目运行起来！

首先我们打开HbuilderX编辑器，将刚才新建的项目test文件夹拖拽至编辑器里，项目导入就完成了，非常的方便快捷。

之后我们点击：运行->运行到终端-> npm run server

 

可以看到，项目已经成功的运行在了我们本地服务器的8080端口，我们打开浏览器，将这个网址复制进去：http://localhost:8080/ ，就可以看到项目的欢迎界面，至此我们的Vue部署全过程结束。

欢迎大家学习和评论区交流，如需转载请注明出处~