前端（web）的工具的使用（DreamWeaver,HBuilder ,VScode）小心得

我也刚开始学习前端，我想一步一步的记录下我的学习过程，今天是写博客的第一篇

工欲善其事必先利其器 

我先来讲一下工具的选用吧，个人认为可选择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键也可以

喜欢不要忘记点一个赞哟