最近转行前端开发，进入前端开发的第一件事就是安装开发环境，前端开发的环境有很多个，这里只来介绍Visual Studio Code开发运行vue的方法，然后再介绍一下Mac电脑通过下载运行node.js进行vue.js的安装步骤。
具体的vue.js安装步骤如下所示。
1、打开浏览器去node.js官网，找到node.js的Mac版本下载位置，点击下载macOS Installer (.pkg)的选项，下载成功之后安装点击打开；

2、安装成功之后，检查是否安装成功，打开Mac自带的命令行工具终端，然后输入命令行：node -v  回车，然后查看是否显示node的版本号，如果显示版本号，就说明node.js安装成功了；

3、安装淘宝镜像（npm）,在Mac电脑下安装淘宝镜像，不要用网上提供的一般的命令行来操作，因为会提示无权限，那么Mac电脑正确的安装淘宝镜像的命令行：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose 回车，等待安装淘宝镜像，保证当前网络质量，不然会用时很久；
4、安装webpack，Webpack是一个前端构建工具，可将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，可以按照需求引用依赖来使用资源。安装webpack的命令行：sudo cnpm install webpack -g 回车，等待安装完成；

5、安装Vue命令行工具 (CLI)，脚手架。Vue 提供了一个官方的CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。Vue-cli脚手架安装的命令行：sudo npm install -g vue-cli 回车，等待安装，安装完成之后，为了检查是否安装成功，输入命令行：vue -V 回车，如果出现版本号，就说明安装成功；

6、Vue安装成功之后，新创建项目，通过命令行：vue init webpack test-object（test-object是项目名称）回车，根据实际情况来选择设置，输入YES/NO，具体选项不再一一说明。
7、创建完新项目之后，需要输入命令行：npm install，最后进入到项目目录下面，输入运行命令行：npm run serve 回车，然后等待一下之后，就运行起来了，然后复制链接到浏览器里面，项目就算是成功运行跑起来了。
8、分享一种小白运行vue.js的方法，对于刚接触前端的开发者来说很实用，但是资深开发者就可以忽略不看了。以下操作是在上面各个步骤正确无误执行完之后才能操作的，请注意。具体步骤如下所示：
a.双击打开Visual Studio Code，然后找到新创建的项目文件位置，或者打开从别的地方复制过来的项目，打开项目；

b.然后在Visual Studio Code顶部菜单栏里面，找到“终端”选项，单击打开下拉菜单栏，点击“新建终端”选项，然后底部菜单栏会出现终端等工具栏；

c.最后在“终端”选项下，输入命令行：npm run serve 回车，即可运行项目。

另外还有一种快捷的方法打开底部终端等工具栏的方法，打开项目之后，然后使用快捷键组合：”Commond + Shift + y”，可以直接打开终端、控制台等。

 以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：

三掌柜的新浪微博：