Vue的开发环境

一、VScode编辑器

1、Visual Studio Code 编辑器，VS code 是微软推出的一款免费且开源的编辑器。用户根据需要自行下载安装。
国内镜像下载链接：

https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exe

二、Vue的下载和引入

Vue官网下载地址：

https://v2.cn.vuejs.org/v2/guide/installation.html

为了方便学习，推荐选择开发版本。
当在HTML网页中使用Vue时，使用

<script src="vue.js"></script>

上述代码表示引入当前路径下的vue.js文件。

三、git-bash 命令行工具

在进行Vue开发时，我们经常会使用到一些命令，如npm（包管理器）、vue-cli（脚手架），这些命令需要在命令行下使用。
git-bash是git（版本管理器）中提供的一个命令行工具，外观类似于windows系统内置的cmd命令行工具，但用户体验更友好。在实际开发中，经常会使用git-bash工具代替cmd 。
以下是git-bash的安装步骤：
1、打开git for windows官网，下载git安装包。

https://gitforwindows.org/

2、双击下载后的安装程序，进行安装。
3、单击 “Next” 按钮，根据提示进行安装，全部使用默认值即可。
4、安装成功后，启动git-bash。

四、Node.js环境

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以让 JavaScript 运行在服务器端。接下来就是对 Node.js 的下载和安装进行详解。
1、打开 Node.js 官网，找到 Node.js 下载地址。

https://nodejs.org/zh-cn/

推荐使用LTS（长期维护）版本。
2、双击安装包进行安装。
3、安装过程全部使用默认值。安装完成后，打开git-bash命令行工具，查看Node.js版本信息，如图所示。

五、npm包管理工具

npm(Node.js Package Manager)是一个Node.js的包管理工具，用来解决代码部署问题。在安装Node.js时会自动安装相应的npm版本，不需要单独安装。
使用npm包管理工具可以解决一下场景的需求：
1、从npm服务器下载别人编写好的第三方包到本地使用。
2、从npm服务器下载并安装别人编写的命令程序到本地使用。
3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

npm中常用的命令：
npm install ：安装项目所需要的全部包，需要配置package.json文件。
npm uninstall ：卸载指定名称的包。
npm install 包名 ：安装指定名称的包，后面可以跟参数 “-g” 表示全局安装，“–save” 表示本地安装。
npm update ：更新指定名称的包。
npm start ：项目启动；通过CDN方式引入Vue，可以缓解服务器压力，加快文件的下载速度（目前网上有很多免费的CDN服务器可以使用）。
npm run build ：项目构建。

小提示：由于npm服务器在国外，使用npm服务器下载软件包速度非常慢，为了提高下载速度，推荐用户切换成国内的镜像服务器来使用。以淘宝NPM镜像为例，使用以下命令：

npm config set registry https://registry.npm.taobao.org

六、Chrome浏览器和vue-devtools拓展

浏览器是开发和调试web项目的工具，这里以Chrome浏览器为例。
vue-devtools 是一款基于Chrome浏览器的拓展，用于调试Vue应用，只需要下载官方压缩包，配置Chrome浏览器的拓展程序即可使用。
简单介绍一下安装流程：
1、下载vue-devtools-5.1.1.zip压缩包到本地。

2、将压缩包进行解压，然后在命令行中切换到解压好的vue-devtools-5.1.1目录，输入以下命令进行依赖安装：

npm install

3、构建vue-devtools工具插件，执行命令如下：

npm run build

4、将插件添加至chrome浏览器。
单机浏览器地址栏右边的三个点的按钮，在弹出的菜单中选择“更多工具”—>“拓展程序”，然后单击“加载已解压的拓展程序”，此时会弹出选择框，需要用户选择拓展安装程序目录。找到vue-devtools-5.1.1/shells/chrome目录，将其添加到拓展程序中。
配置完成后，可以看到当前vue-devtools工具信息，并在chrome浏览器窗口的右上角会显示Vue的标识。

5、如果以上操作不当，可以使用下面的一键安装。

一键安装链接：

https://devtools.vuejs.org/guide/installation.html

然后选择自己所使用的浏览器（推荐使用Chrome浏览器）

到此你的Vue开发环境就算是配置完成了！