1.2　Vue.js编辑器

Vue.js页面是常规的HTML页面，所以我们可以使用常规的HTML编辑器来写Vue.js程序页面，当然也可以用复杂的工具，如WebStorm、Eclipse、PhpStorm、Vscode、HBuider等。本章主要针对入门者，因此这里使用最简易的记事本和Dreamweaver来给大家演示。

此处推荐Dreamweaver 2019，在该工具里写代码的时候，直接会显示代码的运行结果，同时，也便于我们写布局和样式。

1.2.1　编辑器类型

可以使用专业的HTML编辑器来编辑，为大家推荐几款常用的编辑器。

·Dreamweaver：当前推荐版本2019或者2020。

·Notepad++：https://notepad-plus-plus.org/。

·Sublime Text：http://www.sublimetext.com/。

·VS Code：https://code.visualstudio.com/。

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

每一种操作系统都带有简单的文本编辑器：

·Windows用户可以使用记事本。

·Linux用户可以选择几种不同的文本编辑器，如vi、vim或者emacs。

·Mac用户可以使用OS X预装的TextEdit。

接下来我们将为大家演示如何使用系统的Notepad++和Dreamweaver工具来创建Vue.js程序页面，其他两个工具的操作步骤与此类似。

1.2.2　使用Notepad建立第一个Vue.js页面

这里我们用Windows 7系统以及所带的记事本（Notepad）来建立第一个Vue.js页面。

1）在屏幕左下角点击开始图标，如图1-2所示。

图1-2　开始

2）点击“所有程序”，找到“附件”，如图1-3所示。

3）点击“附件”，找到“记事本”，如图1-4所示。

4）打开“记事本”后，复制上节列出的Vue.je代码到记事本，效果如图1-5所示。

5）点击“文件”，然后点击“保存”（或者按快捷键Ctrl+S），文件名为“第一个Vue页面.html”，如图1-6所示；按内容填写即可，效果如图1-7所示。

图1-3　附件

图1-4　记事本

图1-5　复制“入门实例”代码到记事本

图1-6　文件保存

图1-7　填写保存的文件名

6）点击我们刚才保存的“第一个Vue页面.html”，电脑会用默认浏览器打开，效果如图1-8所示。

图1-8　360浏览器打开效果

我们也可以选中该文件，右击，选择“打开方式”，选择其他浏览器（我们这里选择谷歌浏览器），效果如图1-9和图1-10所示。

图1-9　选择谷歌浏览器

图1-10　谷歌浏览器打开效果图

1.2.3　使用Dreamweaver建立第一个Vue.js页面

可以从官网下载Dreamweaver，也可查看本书相关网站上对应的安装视频，下载Dreamweaver后，按照提示操作即可。

下面介绍新建第一个Vue.js程序页面的方法，步骤如下。

1）打开Dreamweaver，效果如图1-11所示。

图1-11　Dreamweaver初始化效果图

2）点击“文件（F）”，选择“新建（N）”，如图1-12所示。

图1-12　文件新建

3）填写标题，点击“创建”按钮，如图1-13所示。

图1-13　文件创建

4）复制代码内容到Dreamweaver，效果如图1-14所示。

图1-14　复制代码到Dreamweaver

5）点击“文件（F）”，选择“保存（S）”，如图1-15所示。填写文件名后点击屏幕下方的“保存”按钮，如图1-16所示。

图1-15　Dreamweaver保存

图1-16　Dreamweaver填写文件名后保存

提示　按1.2.2节中所述方式浏览即可。