第02章 開發(fā)工具

2.1 開發(fā)工具

目前前端開發(fā)工具非常多，例如Dreamweaver、Sublime Text、Atom、HBuilder、Vscode等。對于有經(jīng)驗的開發(fā)者來說，使用哪一款工具都無所謂。不過對于完全沒有基礎(chǔ)的小伙伴，我還是比較推薦使用HBuilder。

這里有個現(xiàn)象有必要跟初學(xué)者說明一下。如果你選擇了Dreamweaver作為開發(fā)工具，我們一定不要使用Dreamweaver那種傳統(tǒng)的、使用界面操作的方式來開發(fā)網(wǎng)頁。這種開發(fā)方式已經(jīng)被摒棄很久了。我剛剛接觸前端開發(fā)的時候，也是深受其害。當(dāng)時跟著一個視頻學(xué)，第一步點這里，第二步點那里……點點點，全部都是用鼠標(biāo)來點，點到頭都暈了。

大家不要覺得用鼠標(biāo)“點點點”的方式來開發(fā)網(wǎng)頁既簡單又快速。等學(xué)了一段時間會發(fā)現(xiàn)，你學(xué)到的根本就不是知識，而只是操作步驟。還有，使用Dreamweaver鼠標(biāo)操作的方式來開發(fā)，弊端極其之多！特別是冗余代碼，一堆一堆的。這樣開發(fā)出來的網(wǎng)站可讀性和可維護(hù)性也非常差。可讀性和可維護(hù)性，是Web開發(fā)中最重要的兩個東西。相信我們學(xué)到后面，會有很深的理解。

當(dāng)然，對于剛剛接觸HTML的小伙伴來說，Dreamweaver還是一款挺不錯的開發(fā)工具，這里并非反對大家使用Dreamweaver，而是反對大家使用Dreamweaver那種“鼠標(biāo)點擊”的界面操作方式來開發(fā)頁面。我強(qiáng)烈建議大家一定要用“代碼方式”去寫頁面，而不是用“鼠標(biāo)點擊”方式去寫。

由于我也從事前端開發(fā)很多年了，對實際工作還是非常清楚的。在真正的開發(fā)中，現(xiàn)在很少有前端工程師會使用Dreamweaver作為開發(fā)工具，更多的是使用HBuilder、Sublime Text、Vscode等。對于初學(xué)者來說，推薦大家使用HBuilder，因為HBuilder上手最簡單。后期的話，推薦Vscode或Sublime Text，因為這兩個更能滿足真正的前端開發(fā)需求。

2.2 使用HBuilder

不管你使用哪款開發(fā)工具，在開發(fā)的時候，我們都需要新建一個HTML頁面，然后再在這個頁面中編寫代碼。

HBuilder是專為前端打造的開發(fā)工具，易上手，也是初學(xué)者的首選。HBuilder的下載地址為：www.dcloud.io。這一節(jié)我們來介紹一下怎么在HBuilder中新建一個HTML頁面。

① 新建Web項目：在HBuilder的左上方，依次點擊“文件”→“新建”→“Web項目”，如圖2-2所示。

② 選擇文件路徑以及命名文件夾：在對話框中，給文件夾填寫一個名字，并且選擇文件夾路徑（也就是存放文件的位置），其中文件名以及文件路徑都可以自己寫。然后點擊“完成”按鈕，如圖2-3所示。

③ 新建HTML文件：在HBuilder左側(cè)的項目管理器中，右鍵單擊test文件夾，然后在彈出菜單中依次選擇“新建”→“HTML文件”，如圖2-4所示。

④ 選擇文件路徑以及給HTML文件命名：在對話框中選擇文件夾路徑（也就是存放HTML文件的位置），并且給HTML文件填寫一個名字（建議使用英文，不要用中文），然后單擊“完成”按鈕，如圖2-5所示。

⑤ 預(yù)覽頁面：在HBuilder上方的工具欄中找到“預(yù)覽按鈕”，然后點擊，就可以在瀏覽器中查看頁面效果了，如圖2-6所示。

最后，對于HBuilder的使用，還有兩點要跟大家說明一下。

• 對于站點、文件、HTML頁面等的命名，一定不要使用中文，而應(yīng)該使用英文。
• 我們可以在HBuilder上方的工具欄中，依次選擇“幫助”→“HBuilder入門”，查看詳細(xì)的使用教程。當(dāng)然，你還可以百度搜索更多的使用技巧。小伙伴們自行摸索一下，很簡單。