00:00
下面呢,咱们开始学习前端的基础知识,首先呢,我们先看第一个内容,咱们安装一个前端的开发工具,前端开发呢,我们就不用idea开发了,Idea呢专注于开发弹道后端Java代码,咱们前端用个新的工具,这个工具呢,我们叫Vs code,通过它进行开发,那下面咱们来讲解这个工具的安装和使用方式,咱们来看一下我的课件中。我课件中写到第一部分关于前端开发的一个介绍,这里边呢讲了它的这么一段历史,这历史我就不读了,给大家简单介绍一下。首先前端工程师这个词呢,最早源于美国,后来随着发展到今天为止已经很完善了,目前呢,在国内分为前端工程师和后端工程师,还有一个叫中间层,就是前端调后端的过程,在国内中间层由前端完成。
01:02
也有的由后端完成。而我们现在做的就是前端工程师这个事情,给大家了解一下,如果有兴趣同学可以把这段话自己去读一遍,关于他的一个历史,咱们看我们的重点部分,咱们现在开发前端用一个工具叫v code进行开发,那这工具要用的话怎么用,给各位自我介绍。我在图上给大家写下。首先第一步咱们先联网下载Vs code的这么一个安装的软件,把软件先进行下载,这是里边的第一步,然后下载怎么做,我们看一下啊,我课件中呢,提供了一个网址,咱们把这个网址打开,我在浏览器中直接打开一下。然后大家看这个网址打开之后呢,这里边有它的下载,下载过程中它有不同的终端,有Windows Linux,还有这个苹果端,咱们下的是Windows端,直接一点,它就联网进行下载,我这里边已经下载过了,所以咱们直接下载之后把这个exe文件直接安装就可以了,这个安装过程中没有什么特别注意的地方,我们只要正常安装软件就可以了,这是第一步,联网下载这个软件,然后咱们进行安装就可以了。
02:28
这个给各位做一个说明。我把这个给大家截到咱的图里边,就是各位到这个网站中下载安装就可以了,这是里边的第一步,很简单,各位只要正常装个软件就足够了,然后这个装之后,我们外色code安装之后呢,我们看一下啊,安装之后我这是装到了D盘,然后在它里边呢,有一个标志性的图标,就这个图标,这就是we code,然后你把它双击可以进行打开,咱们看一下这个效果。
03:08
我强调啊,你第一次打开呢,应该不是长我这个样子,我这里边做了配置,这里边咱需要有些配置,然后才能正常使用,那我来写一下里边的第二部分,第一步下载安装,然后第二步咱们打开这个Vs code。也就是刚才我们看到的这个地方,你找到这个图标,直接双击,然后把它打开。这是第二部分,我写这里。这位置,然后打开之后怎么做呢?在里边呢,咱们需要给它安装上,就是一些插件才能使用,当然你不装也能用,只是装上之后会特别方便,这是我们的第二步,然后这插件怎么装,有哪些插件咱们看一下啊,首先第一部分就是你第一次打开的话,你的界面应该是英文版,不是中文,另外它的颜色应该也不是这个颜色,这些都是我后来调整的,那咱怎么装插件大家看啊,你点这个位置,它叫做扩展,就这里,然后扩展里边你联网之后,在应用商店中搜索咱们装插件,我这里装了四个,当然你可以装更多,只是这个四个足够我们进行使用了,这就我们这里边我已经装好插件。
04:28
我再说一遍啊,你点这个扩展,然后在用商店中直接搜索把插件装上,我们这里边装了四个插件,这四个足够我们使用了,当然里边有更多插件,只是更多没有必要,如果你装的更多,可能还会造成你这个工具用的特别的慢。那咱们看一下这个插件是什么,首先啊,你点扩展就这里,咱看第一个插件就是中文简体,你装完之后,你当前就变成了中文,你在里边直接搜索就是这个Chinese。
05:04
这个啊。我们搜索一下啊,就是它,然后你把这个进行安装,因为我这个已经装过了,你点安装,然后重启code就可以了,这是第一个插件,中文这个插件,然后这个之后还有第二个插件,这个插件叫live server。我们看到啊这个插件。Live server什么意思呢?各位看到server是不是服务器啊,它就是一个运行的服务器,比如说咱们之前各位知道有tomcat能运用我们的程序,而现在你不需要装tomcat,用live server能通过服务器,通俗说也就是IP端口号能访问你的页面,这是第二个插件,叫live server,这各位给他搜索安装。然后除了这个之外,还有两个,这两个是VE相关的插件,一个是vuee的这个工具,一个vuee的这个help,你把这两双上到里边直接搜索,比如这个UE。
06:03
相关的这个插件啊,一个是voe这个helper。就是这个。还有一个是voe的另外一个工具的插件,就这个,你把这些都给它装上可以了,在里边联网搜索,直接进行安装,安装之后把weather code重启之后就能使用,你重启之后这里边的这个语言就变成了中文。这是我们说的四个插件的安装,这各位给他装上,然后装上之后,我们里边还有第三步,第三步呢,你可以设置一下,就你当前这个就是工具中那个语言的那个字体的大小。包括你的背景的颜色这些可以设置啊,当然不设置也可以看你个人习惯,那怎么设置演示一下啊,咱们做法就是你点里边这个叫。管理。
07:01
然后里边有一个设置,在设置中我们看啊,这个位置有一个叫常用设置,有你字体大小,你可以改的大一点,另外还可以设置它的背景颜色,你点这里边有一个叫颜色主题打开,然后你看这里边啊,比如说我们试一下。各位看颜色是不是有不同的变化,默认应该是好像是这种颜色啊,知道,就是你根据习惯改成你自己习惯的颜色,我习惯这个颜色我已经做了修改,直接回车他就可以进行修改。这个啊,是我们做的这么一个说明,改一下你的自己大小,包括背景颜色,根据自己的习惯进行修改,这是第三步,然后这个之后呢,我们还有第四步。写一下啊第四步。第四步是什么呢?如果说咱们在工具中要编写前端代码,我们需要把它放到一个叫工作区里边去,就是你要在里边创建一个工作区。第四步。
08:03
写到这个位置创建工作区,然后在工作区里边,并且代码,因为它的很多功能只有在工作区中才能进行使用,这是第四步。那工作区怎么创建,给各位做个演示。首先第一个在code中呢,它并没有专门的一个选项能建工作区,咱们需要自己来手动创建,怎么创建小这位置啊,首先第一步。创建一个空的文件夹,然后第二步打开,这个就是使用code。写的详细点啊。打开这个空文件夹,然后打开之后第三步把你的空文件夹另存为或者保存为工作区。这是里边的一个创建过程,然后下面给各位同学咱们来演示一下,看这个该怎么进行创建,那下面开始做一下演示。
09:07
首先第一个呢,我在这里边我有一个目录code,我先建一个空的文件夹,比如说我起个名字叫硅谷课堂。就叫这个名字,然后创建之后第二部分,我用code打开这个文件夹,把刚才那个硅谷课堂打开,现在大家看已经打开了,打开之后第三步咱把文件夹另存为工作区,就这句话你看啊,将工作区另存为,那我们一点。注意不要选错啊,找到你刚才文件夹,然后给你工作区起个名字,这个名字里边注意啊,后缀名是固定的,就是这个codepa,前面名字可以随便起,那比如签个名字,我就叫硅谷课堂,然后咱们点保存,大家再来看这位置是不是就成为了工作区,这是咱们创建工作区的过程,大家把这个自己来快速创建出来,建个空文件夹,用外code打开,最终另存为工作区就可以了。
10:12
然后另存位之后,在里边我们可以在工作区里边建文件夹,包括建这个就是文件,那我们创建啊,比如现在你看后面有按钮,或者说你在里边直接右键都可以,那我就点这个建一个文件夹。就这个啊,然后文件夹,比如说我起个名字叫T,在T里边咱们可以建个文件,它里边建文件需要你自己手动指定后缀名,比如说我建第一个文件就叫哈点HTML。比如说我现在再来建第二个文件,我叫零一.js啊,包括我可以再来建个文件,我叫这个001.css给大家看,这就是文件的创建,文件创建之后我们做一个简单的测试。
11:02
比如现在我在HT中写这么一段HTL代码,这里边呢有一个快捷键能直接写出来啊,再看过程啊,我再说一下怎么做,很简单,你输入一个感叹号,它就直接出现提示,然后你点这代码就生出来了,这是HTM的基础代什么在里边我们随便写内容,我个标写个内容。外资靠倒。现在这个文件就可以了,然后可以之后咱把它进行访问。怎么访问说明啊,第一种方式,你可以找到文件的位置,然后你右键用浏览器打开,这么做是可以的,另外还有第二种方式,咱们可以通过刚才咱们这个插件叫live server,通过服务器,也就是IP端口号访问是可以的,类似于咱们汤开的效果,那怎么做,咱们右键点这个。
12:02
With server,然后现在我一点。大家看啊,在我的浏览器中就出来了,你看它的访问路径127.0.0.15500,加上T加上文件,这样的话,用浏览器这种通过live server服务器完成的访问,这是我们看到效果。但是我说明啊,有的同学呢,基于它的系统问题,或者说浏览器的问题,你右键点可能不会直接打开,但是也没关系,右键你点这个你发现没有打开,那怎么做,你打开浏览器直接访问,用127.0.0.15500回车,然后这里边有你文件夹,有你的文件,你直接点一样可以访问,这是你的系统或者浏览器的问题,如果你不能弹出来也没关系,用IP端口号直接访问,直接点页面也能看到,效果是一样的。
13:03
所以以上是咱们针对weather code的这么一个基本的使用。我最终重复一遍啊,就是各位在这过程中,第一个你联网下载这个软件,把它装上,然后装上之后在里边安装这么几个插件,当然可以装更多,指这四个足够咱们使用了,装完插件之后,把工具重启一下就能使用了,然后下面你建个工作区,在里边建个页面,最终能完成这个测试。以上就是它的一个基本使用,另外呢,里边有一个小问题特别说明一下啊,大家注意看啊,比如现在我在里边啊,再写个内容。我写完内容之后,大家看这个位置是不是有个黑点绊示你文件需要保存,咱需要点CTRL保存一下,而且保存呢,因为咱们用惯了idea,有同学不习惯它总是忘记保存,那怎么做呢?一种解决方式,你点文件里边有一个,这个叫自动保存,当你把这点上之后,你再写完代码,它就会像idea一样把你写的代码自动保存,你根据自己的实际来决定。
14:18
啊,就你是否点这个点这之后跟D一样,它就可以自动保存了。所以以上就是关于Vs code工具的安装,包括它的一个基本使用,咱后面开发前端就在这个工具中进行开发。
我来说两句