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