新手小白搭建Vue.js开发环境

1 安装Node.js

打开Node.js官方网站：https://nodejs.org/zh-cn。找到Node.js下载地址。

图中Node.js有两个版本，左侧为LTS（Long Term Support）是提供长期支持的版本，只进行微小的Bug修复且版本稳定；右侧为当前发布的最新版本（Current），增加了一些新特性，有利于进行新技术的开发和使用。选择LTS版本进行下载。
安装时全部选择默认，一路Next下去。最后安装完成后打开命令行工具，输入命令node -v，查看node版本，查询到说明安装成功。如下图所示。

2 安装Yarn

参考链接：前端效率神器Yarn的安装和使用（超简单的安装）

2.1 Yarn简介

Yarn是FaceBook发布的一款取代npm的包管理器。

2.2 Yarn特点

速度快：Yarn缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。
安全：在执行代码之前，Yarn会通过算法校验每个安装包的完整性。
可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn能够保证在不同系统上无差异的工作。

2.3 Yarn安装

使用如下命令进行全局安装：npm install –g yarn
安装完成后使用如下命令查看Yarn版本：yarn --version

3 项目快速构件工具——Vue CLI

3.1 Vue CLI简介

Vue CLI是一个“脚手架”，它可以帮助我们快速搭建一个完整的Vue应用。Vue CLI是Vue官方提供的构建工具，可用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）、lint代码语法检测及构建生产版本等功能的单页面应用。

3.2 Vue CLI安装

在安装Vue CLI之前，需要安装Node.js。
如果已经全局安装了旧版的vue-cli(1.x或2.x)，需要通过如下命令进行卸载：

npm uninstall vue-cli –g

打开命令行工具，通过npm方式全局安装@vue/cli脚手架，这里安装的脚手架版本为3.9.2，具体命令如下：

npm install @vue/cli@3.9.2 –g

安装完成后为了检测是否安装成功，使用如下命令来查看vue-cli的版本号：vue –version

4 Chrome浏览器和vue-devtools扩展

vue-devtools是一款基于Chrome浏览器的扩展，用于调试Vue应用，只需下载官方压缩包，配置Chrome浏览器的扩展程序即可使用。
此处附上参考链接：Vue-Devtools安装配置教程（献给伸手党）