2.2 安装WebStorm
WebStorm是一款前端页面开发工具。该工具的主要优势是有智能提示、智能补齐代码、代码格式化显示、联想查询和代码调试等。对于初学者而言，WebStorm不仅功能强大，而且非常容易上手操作，被广大前端开发者誉为Web前端开发神器。
下面以WebStorm英文版为例进行讲解。首先打开浏览器，进入WebStorm官网下载页面，如图2-2所示。单击Download按钮，即可开始下载WebStorm安装程序。
图2-2 WebStorm官网下载页面
1．安装WebStorm 2019
下载完成后，即可进行安装，具体操作步骤如下：
（1）双击下载的安装文件，进入安装WebStorm的欢迎界面，如图2-3所示。
（2）单击Next按钮，进入选择安装路径窗口，单击Browse...按钮，即可选择新的安装路径，这里采用默认的安装路径，如图2-4所示。
（3）单击Next按钮，进入选择安装选项窗口，勾选所有复选框，如图2-5所示。
图2-3 欢迎界面
图2-4 选择安装路径窗口
（4）单击Next按钮，进入选择开始菜单文件夹窗口，默认为JetBrains，如图2-6所示。
图2-5 选择安装选项窗口
图2-6 选择开始菜单文件夹窗口
（5）单击Install按钮，开始安装软件并显示安装进度，如图2-7所示。
（6）安装完成后，单击Finish按钮，如图2-8所示。
图2-7 开始安装WebStorm
2．创建和运行HTML文件
（1）单击Windows桌面上的WebStorm 2019.3.2 x64快捷键，打开WebStorm欢迎界面，如图2-9所示。
图2-8 开始安装WebStorm
图2-9 WebStorm欢迎界面
（2）单击Open按钮，在弹出的对话框中选择创建好的文件夹codeHome，如图2-10所示。
图2-10 设置工程存放的路径
（3）单击OK按钮，进入WebStorm主界面，选择File→New→HTML File命令，如图2-11所示。
图2-11 创建一个HTML文件
（4）打开New HTML File对话框，输入文件名index.html，选择文件类型为HTML 5 file，如图2-12所示。
图2-12 输入文件的名称
（5）按Enter键即可查看新建的HTML 5文件，接着就可以编辑HTML 5文件了。例如，在<body>标记中输入文字“大家一起学习Vue.js”，如图2-13所示。
图2-13 输入文本内容
（6）在谷歌浏览器（下文的浏览器都表示谷歌浏览器）中打开文件的路径，或者打开软件右上角的浏览器工具栏，如图2-14所示，选择指定的浏览器，单击即可打开。
图2-14 浏览器工具栏
在浏览器中显示的效果如图2-15所示。
图2-15 index.html文件显示效果