windows下安装配置vue开发环境，并使用vue-cli脚手架搭建一个基于 webpack 模板的vue项目（创建-打包-构建解释）

写在前面：

本人后端dog，项目开发可能要涉及前端vue，遂学。下面主要从两个部分，基于实际开发需求，以前端小白的心态做一些学习和实践的记录和总结：

• 第一部分，详细描述Windows 下vue开发环境的安装配置
• 第二部分，超详细且浅显讲如何使用vue-cli脚手架搭建一个基于 webpack 模板的vue工程

一、鸟瞰Vue开发的环境需求

vue.js所有的环境基础包括：

• Node.js ：这是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时，(运行时：可以理解为运行环境)
• npm：这是node.js的包管理工具
• webpack：前端资源模块化管理和打包工具
• vue-cli：脚手架构建工具
• cnpm：npm的淘宝镜像

二、安装配置vue的开发环境

如果不确定自己之前是否安装过上面这些东西，可以先确认一下，例如下面我想确认一下我是否已经装了node.js:

• 菜单栏-->输入cmd-->找到-->右键管理员方式打开
• 输入 node -v  ,回车：

如果像上面这样显示出版本号，则代表已经装过了，在版本满足你需求的情况下就无须再装了。如果没有装过，会提示你"xx不存在"类似的指令。

1、安装node.js

到node.js官网下载你所需要的版本，双击下载后的安装包，按照提示一路点"下一步"（和安装普通软件一样）即可。

安装完以后，检查一下PATH环境变量 是否已经自动配置了node.js。

点击开始=》运行=》输入"cmd" => 输入命令"path"(下面是我cmd查出来后放记事本格式化后展示出来的样子):

可以看到PATH环境已经安装成功。

现在我们再来cmd查一下node.js版本：