我也剛開始學習前端，我想一步一步的記錄下我的學習過程，今天是寫博客的第一篇

工欲善其事必先利其器?

我先來講一下工具的選用吧，個人認為可選擇3款軟件比較好用

1 DreamWeaver 我覺得這個軟件初學者可能比較適合，這個軟件上手快，用起來比較簡便，幾乎不需要什么配置。

簡單的說一下一下DreamWeaver的一些使用吧

1）用DreamWeaver創建一個web項目吧

首先就是我們要新建一個站點

點擊新建點，然后選擇一個本地的文件夾，然后新建的站點就在右邊喲，你右擊你新建的文件夾就可以開始新建你的html css js 等文建了

2）一些簡單有用的操作

（1）編輯區

這3個按鈕將會讓你的工作區呈現不同的效果

實時視圖可以看到自己的代碼呈現的效果

（2）當你想換自己的瀏覽器的時候，你可以點擊文件下面的實時預覽的編輯瀏覽器列表，里面也可以看到用瀏覽器預覽的快捷鍵，在里面你也可以找到字體的調整等等

3）我之前用DreamWeaverC6的時候它的網頁預覽的前綴是ftp，后面我用DrreamWeaverCC2018的時候它的前綴是http結果它就把我js代碼給攔截了，js代碼效果就出不來，一種處理方法就把js的onload去掉，并把js的引用寫在body的后面，一種方法就是不用這個版本嘻嘻。這個錯誤讓寶寶我找了好幾天呢嚶嚶

2?HBuilder 做為快要入門的小白菜，我真的覺得這個軟件好好用（我這個軟件是在mac機上面用的，但是在windows上面應該是一樣的）

1）首先呢就是創建一個web項目啦，它創建web項目很簡單的，勝是得我的心，點擊加號你點web項目就好了，它自動就幫你把html, css ,js給你創建好了，所以就特別方便，并且html的模板也給你了，是不是so cool

2）然后就是用瀏覽器瀏覽了，它沒有像vscode那么麻煩，直接點擊上面就有選項，寶寶我表示超喜歡

3）就是各種視圖和快捷鍵，它就在右側很方便就可以找到，超讓人喜歡有木有

3 VSCode ?對于我這樣子的一個新手來說呢，雖然我是計算機專業，但是我覺vscode我現在剛開始用有很多的地方感覺不是那么順手，因為它首先要安裝很多的插件，并且我想換一個瀏覽器瀏覽還要去改代碼。其中view in browser插件的快捷鍵我還用不了。是因為我道行太淺了，所以用vscode不順手，很多的大佬都是用的vscode現在很多的公司也是用是vscode，并且我在網上查了一般大佬們都說vscode很好用，等我學深一點再來更新vscode的用法吧

1)vscode拿來寫前端需要安裝運行插件，這個網站說得還是比較完整的?https://blog.csdn.net/shunfa888/article/details/79606277（其他博主的網站）

2)vscode想要建一個web項目是這樣子的

先在一個地方建一個空文件夾，然后點擊文件，再點擊文件下面打開文件夾，選擇剛才建好的文件

?

再點擊左邊的第一個就能看到你剛剛打開的文件夾，我的是myproject然后在?myproject那一行的右邊有加號，點他就可以添加了后綴可以html或者css js，這樣子我們的web工程就建好了

3）后面就是就是看效果的時候了

因為安裝了插件 view in browser就可以用快捷鍵ctr+F1可是用快捷鍵的時候居然報錯，錯誤 ：Running the contributed command:'extension.viewInBrowser' failed.?說我擴展有問題，于是我按照網上的辦法先卸載了這個插件，再安裝結果一樣，后面還是用的右擊html的方法點擊第一個view in browser ，但是有一個小細節不要忽略了就是記得先ctr+s以后再在瀏覽器里面看不然什么效果也沒有，并且也不像DR那樣會提示你是否保存，也許你會和我一樣剛開始找不出錯誤喲

4）當你剛建立一個html文件的時候呢一定是空白的，讓你去寫那些開頭什么可能是記不住也容易寫錯，所以在第一行輸入一個！然后按tab鍵就出來啦或者輸入html5按tab鍵也可以

喜歡不要忘記點一個贊喲

總結

以上是生活随笔為你收集整理的前端（web）的工具的使用（DreamWeaver,HBuilder ,VScode）小心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。