暗黑不朽怎么处情缘

2.2　安裝WebStorm

WebStorm是一款前端頁面開發工具。該工具的主要優勢是有智能提示、智能補齊代碼、代碼格式化顯示、聯想查詢和代碼調試等。對于初學者而言，WebStorm不僅功能強大，而且非常容易上手操作，被廣大前端開發者譽為Web前端開發神器。

下面以WebStorm英文版為例進行講解。首先打開瀏覽器，進入WebStorm官網下載頁面，如圖2-2所示。單擊Download按鈕，即可開始下載WebStorm安裝程序。

圖2-2　WebStorm官網下載頁面

下載完成后，即可進行安裝，具體操作步驟如下：

（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

（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文件顯示效果