admin 管理员组文章数量: 887019
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部署全过程结束。
欢迎大家学习和评论区交流，如需转载请注明出处~
版权声明：本文标题：win10安装和搭建vue环境（超详细教程）Vue新手教程(1)： 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729149064h1323824.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论