前面写过一篇关于Vue的文章：

《与Vue先握个手》

通过这篇文章，我们已经初步领略了Vue的强悍功能与使用的简便性，但文章中举的例子，都是通过文本编辑器生成HTML文档，然后用浏览器直接打开生成的HTML文档，操作虽然简单，但这种开发方式，使我们有点像程序员中的乞丐一样。

下面搭建一个Vue的开发环境，让我们也当一把高雅的Vue程序员。

自从使用Vue时，我就一直用Eclipse开发工具。其实，Vue官网推荐大家使用HBuilder工具，我最初也尝试过HBuilder，不过放弃了，放弃的原因，我怎么都回想不起来了。算了，还是介绍我最熟悉的Eclipse吧。

1、安装node.js

我们安装node.js，是为了使用其中的npm，npm保存了大量我们需要的软件版本。

百度一下node.js，然后进入找到的node.js官网：

点击“12.19.0”版本，网页会自动下载node.js到本地：

网页提示告警信息，我们保留下载的文件，于是本地得到了node-v12.19.0-x64.msi文件。

双击启动node-v12.19.0-x64.msi文件，完成node.js的安装。

安装完成后，在命令行下执行npm -version命令，可以显示版本信息，即表示node.js安装完成了：

2、安装cnpm

为了提高后面的安装速度，建议先安装npm，然后用cnpm取代npm。

在命令行下执行下面的命令，即完成cnpm的安装：

npm install -g cnpm --registry=<cnpm的网址>

命令中的<cnpm的网址>，是在registry.npm.taobao.org前面加上https前缀。

3、安装webpack

webpack是一个模块化打包工具。

在命令行下执行下面的命令，即可完成webpack的安装：

cnpm install webpack -g

4、安装vue ClI和相关工具

vue CLI是vue.js的脚手架，用于快速搭建vue.js项目。

在命令行下执行下面的命令，即可完成vue CLI的安装：

cnpm install @vue/cli -g

安装完成后，执行vue --version，可以得到当前的版本：

命令行下执行下面的命令安装vue-resource和vue-router：

cnpm install vue-resource vue-router --save

命令行下继续执行下面的命令：

cnpm install -g @vue/cli-init

5、Eclipse安装

百度一下Eclipse，然后进入到找到的Eclipse官网的下载网址：

点击Download packages，在下载列表中找到“Eclipse IDE for Web and JavaScript Developers”：

点击Windows64位，进入该版本的下载网页：

点击“Download”，即可完成Eclipse软件的下载，得到
eclipse-javascript-2020-09-R-win32-x86_64.zip文件。

解开该文件，得到eclipse目录，执行目录中的eclipse.exe文件，即可启动Eclipse软件。

6、Eclipse插件安装

启动Eclipse，然后选择“Help|Eclipse Marketplace...”菜单项：

输入node进行查找，找到Nodeclipse.github.io后安装：

安装完成后，输入vue，找到Vue.js::CodeMix后进行安装：

到现在为止，我们已经完成了Vue开发环境的搭建，下面我们实操，创建一个Vue工程。

7、创建Vue工程

选择“File|New|Project...”菜单项：

选择CodeMix下的Vue Project，然后点击“Next”按钮：

输入工程信息，工程名为first_vue：

点击“Finish”按钮，即完成了Vue工程的创建。

8、运行程序

点击工具栏中的“Open a Terminal”按钮：

以Local Terminal的形式启动。然后进入到工程的目录：

执行npm install命令，执行完成时Terminal窗口显示如下：

执行npm run serve命令，执行完成时Terminal窗口显示如下：

在浏览器中输入上图给出的url，浏览器中显示的信息如下：

现在，我们已经把Vue开发环境搭建起来了，后面我们会使用这个环境进行进一步的编码开发。