{"path":"532615","ref":"default.md","title":"1.vue开发环境及工具准备","content":"\n**1.** 搭建vue项目的开发环境，首先需要安装node.js，这是一切的基础。 **[点击这里下载node.js](http:\/\/nodejs.cn\/)** \n  进入node官网点击下载如下图所示，window用户根据自己的系统下载32或者64位的安装包。推荐下载.msi安装包，安装时会自动帮你配置环境变量，可以省去很多麻烦。选择.zip文件的用户，解压之后仍需手动配置环境变量，具体如何配置请自行百度。\n![node](https:\/\/gitee.com\/uploads\/images\/2018\/0223\/092254_61a804ac_1384885.png \"屏幕截图.png\")\n\n**2.** 安装node，一直点击next就可以了。安装时也会自带安装npm（node 包管理工具）。安装完成后，打开命令行工具(win+r，然后输入cmd)，输入 node -v和npm -v，如下图，如果出现相应的版本号，则说明安装成功。\n![node-success](https:\/\/gitee.com\/uploads\/images\/2018\/0223\/095024_4cc0cb49_1384885.png \"屏幕截图.png\")\n\n **3.** 在此之前，我们还需要安装一个项目构建工具webpack，因为vue-cli就是在该工具之上构建的。不懂webpack，[点这里查看webpack中文文档](https:\/\/doc.webpack-china.org\/)。打开命令行工具输入(win+r，然后输入cmd)，安装webpack：**npm install webpack -g**。安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。（图中出现的警告可以忽略）\n![webpack](https:\/\/gitee.com\/uploads\/images\/2018\/0223\/100444_1b246f7b_1384885.png \"屏幕截图.png\")\n\n **4.** 安装vue-cli脚手架构建工具，打开命令行工具输入：**npm install vue-cli -g**，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。\n![vue-cli](https:\/\/gitee.com\/uploads\/images\/2018\/0223\/100806_9ef014b6_1384885.png \"屏幕截图.png\")\n\n至此，我们完成了vue项目构建所需要的环境和工具。\n\n"}