day03【项目前端相关基础知识一】/04-尚硅谷-谷粒学院-前端技术-vscode安装和使用

下面啊，咱们说这个前端，其实这个前端呢，我在昨天给大家介绍概念的时候，咱也说到了前端和后端，昨天咱们提到了前端呢，其实它的主要作用是用于数据显示的，它主要啊有这么一个过程，通过阿贾克斯调用，咱们就是写这个接口，然后得到数据，把数据做显示，这是前端可以说做的一件主要的事情。大家去这个前端啊，在我们比如说各位在找工作时候，或者说你到很多的招聘网站上会看到一个职位，这职位呢，就叫做前端工程师啊，就是有这么一个职位叫前端工程师。而这个职位呢，可以说啊，目前来讲也算是一个比较热门职位，而前端工程师其实主要做什么呢？就是写我们前中内容，比如说扎va克块RY，包括页面中的各种效果，它要调接口，这中页面中的各种过程啊，叫前端工程师，而现在就是很多国家呀，也在流行这么一种说法，就是这个东西。

这个单词我觉得各位应该都认识啊，咱看它这叫什么。For sta engineer什么叫全占有？什么叫全占？就是你现在既要会写后端，也要会写前端，后端接口，前端调用这整个过程都要做到，甚至说呢，可能你还负责这个页面，美工这些东西啊，这些都要做到，但是就是啊，一般来讲，在一个公司里边，比如说特别是在咱们中国这些大部分公司中，比如说我们以后在我实际工作中，后端接口肯定都是我们去写的，而前端的大部分很多工作中咱们也需要写啊，当然一些页面，比如说美工的东西可能我们写不到，当然一般这种调用过程我们都要写到，对这个前端也很重要，虽然说咱们的定位不是专业的前端工程师，但是前端中的知识咱们大部分应该也能做到一些基本效果，咱应该也能做出来。

因为这对于我们以后绝对是未来的一个趋势啊，未来的趋势绝对都是全债，就是你前端后端都得做，大数据也得会，美工也得会，运维也得会，什么都得能干啊，这绝对是一种趋势，所以咱们用这两天时间来讲一下前端中这个内容啊，大家明确这么一个背景啊。然后这个说完之后，咱下面看一下我们内容啊，这里边给大家写一下啊。就是前端，那前端中做的第一个，首先呢，各位需要先安装一个前端的一个开发工具，就是我们刚才说那个外code，这个code各位在我工具中直接双击下一步，下一步把它装上就可以了啊，就是你做一个安装，这是第一个啊，然后装完之后呢，在这个weather code里边，需要各位就是安装一些相关的插件啊，这插件我强调啊，就是你不装插件，咱这工具也能用，只装上插件之后，让咱们这个应用更加的方便，所以各位需要在里边装上这么些插件。

那下面来说一下这插件该怎么装啊，就是默认你打开，刚才同学也说到它是英文的，其实英文也没有问题啊，但咱可以装一些插件怎么装给大家演示啊，首先第一个你看啊。在这里边有这么一个地方，这个地方就你点它这个叫扩展啊，比如现在我们把它点开，然后点开之后我们看啊，在这里边呢，默认应该是没有对我已经装过了啊，默认你在里边就搜索你的插件，然后各位装什么插件，我这里边是已经装好的啊给大家先截张图。就是做法就是你在里边呢，点这个按钮，然后来安装这个插件啊，给大家不知道这边来。咱们啊做这个。我写一下啊，需要你先安装。插件我这里边呢，列了一共有四个插件啊，当然实际中可能有更多，这四个应该足够我们目前的阶段用的啊，那怎么装演示啊，做法很简单，你点它之后就点这个之后在这里边直接搜索，根据我这个名字，第一个搜的这个叫你看啊，叫这个Chinese。

就这个你点它之后，然后里面安装，比如说咱们换一个啊，比如说点它你看啊，我们装的是这个这个第一个插件，这各位应该都认识啊，它叫中文简体，就是一个汉化包，让你里边能显示中文，那比如说我们这里边一个繁体，当你搜索之后，默认这里边应该不是它默认是这个样子安装，你点击安装这插件就能装上啊，就这么装，没有什么特别的，就是装完之后你需要把一个code重启一下，或者给它重新加载一下就好使了。啊，这是第一个啊，插件咱需要装上，然后这里边有更多插件啊，咱找一下啊，我这里边这么多个。就是都是这种方式，第一个插件是中文简体，再看第二个插件，这个插件叫live server。

就这个插件啊，这是我们装的第二插件，就是你点它啊，不是这个第一个啊，Live server把它装上可以了，而这插件是干什么的，给大家强调啊，咱看这个单词server是不是有服务意思，它就是你理解为啊，是一个内置的一个服务器，比如说我们之前咱都学过tomcat，那你我们用tomcad还需要再装个tomcad，里边再放东西，然后再启动，可能会比较麻烦，而现在在这工具中自带的一个服务器，你可以理解为它就能模拟出tomcat类似效果，咱不需要用tomcat，用它也能通过IP端用号进行访问，这是第二个叫live server，直接搜索装就可以了。然后还有第三个这个东西啊，就是它哦，直接点了它叫VEET玩这是什么呢？它是一个我们用于vee开发一个工具，一个东西，就用它之后啊，咱可以更方便我们后面那个vouee的使用，还有一个叫vouee helper啊，也是用于vouee开发的，就这两个，主要为了咱后面做vuee操作，其实不装它vouee能用，就是装它之后你再看到voe的代码，不同代码会有颜色的变化。

啊，给大家举个例子啊，比如说我们随便找个代码啊，这是我之前写那个测试代码。大家看这代码中啊，你注意看。哎，不是这个啊。应该是他。这个啊，大家看代码中啊，你注意啊，就是不同的部分是不是有颜色的变化呀，咱装了插件之后就会有变化，但你不装插件，其实代码也能写，只是有些特定的关键字，它没有什么变化啊，就这个区别，所以咱们现在各位在用的时候，需要你装上这几个插件，做法就是点这个框，然后里边直接搜索几个插件，它就能出来，你点安装就可以了，安装之后把这个外code重加载，或者重启一下，它就都可以使用，然后你再重启，里边应该都变成中文啊，但是别装错啊，但装的是中文简体啊，但是你装个繁体也能用，就是那个字你可能看不懂啊。

这是我们需要装的几个插件啊，当然有更多，咱目前这几个就足够咱去用了。啊，这是我们要做这个事情啊，各位给他一边给他装上啊，没有什么难点，直接你搜索装就可以了。然后这个做完之后啊，咱往下看。呃，这里写一下啊，就是我们说的，首先你先安装一个插件。然后咱们安装插件之后，我们要做第二部分啊。给大家划到右边啊，第二部分做什么呢？大家注意啊，比如说我们之前啊，在写后端代码的时候，咱在里边我是不是要建这么一个工程，比如建一个project，而这工程是不是要在一个，比如说我们在这个工作区或者叫工作空间中，而现在在前端中跟它类似，那前端怎么做？给大家强调啊，我写第二句话啊，这些都是准备工作啊，就是我们现在比如说我们用weather code要做其他开发，那你首先啊，需要先创建一个东西。

这东西类似于咱们idea或者live中那个沃克维的工作，就工作空间，在我们前端中，它叫这个名字。叫做工作区，所以第二步呢，咱需要建个工作区，然后咱们后面的这个前端代码啊，前端代码我们是都写到这个工作区里边，因为在工作区里边咱还能写里边有些代码，有些代码你不在工作区中是无法实现的啊，这是第二步，咱需要建个工作区。那我下面给大家演示这工作区该怎么创建啊，希望各位啊，看一下我这个操作步骤，一会儿自己给他实际操作一遍啊。首先我强调啊，这是我先创建过的，我重新演示啊，它的做法怎么做？第一个你点文件，这里边没有新建工作区的按钮，就是它里边不能直接新建工作区，但只能就是另存为工作区，那我演示怎么来做啊，给大家说明。

我小这位置啊。首先做好的第一步，咱们先啊，就是在你的本地，本地那个就是硬盘里边，或者本地中先创建一个空文件夹，这是第一步啊，那比如说我来演示一下啊，比如现在我就在我这里边，比如我在这个。Work中我就建一个空文件夹，名字随便起，但是名字中几点注意啊，第一个咱们不要有中文，第二个不要加特殊符号啊，其实加中文应该也没有错，但是咱们这些东西最好就是都不要加中文，不是最好啊，全部要加中文，这点可以注意啊，比如说这个名字我就叫幺零，幺零啊，这是一个空文件夹，这是我们做的第一步。然后做完之后，咱看第二步。第二步怎么做呢？咱们使用Vs code打开你创建的空文件夹啊，这是第二步，那我来演示啊v code，咱点文件是不是就打开文件夹啊，就你点这个。

点文件，点这个叫打开文件夹，咱把我刚才建那空件夹给它打开啊，这是里边的第二步。啊，那我来演示啊。文件打开文件夹，找到我刚才建的是不是幺零，幺零，你点，然后点选择文件夹，这个就打开了啊，这是第二步，当然各位注意啊，这么打开这个不是工作区，它只是个文件夹，咱下面需要做第三步。啊，这里边解压啊第三步。第三个怎么做呢？咱的做法就是现在啊，你再点文件里边一个按钮，这个按钮。说将这个啊工作区另存为咱需要选择它。这是我们的第三步，就是把文件夹保存成工作区。把我们的这个。

文件夹保存成工作区。啊，这是它的第三步，也就是刚才我画的这个啊，咱们点中它，然后你就是你文件将工作区另存为。第三步啊，那我们来试一下啊。现在点文件将工作区另存为，然后另存为之后怎么做啊，大家注意啊，这里边有个特点啊，你注意看下面有一个保存类型，这是外code工作区那个类型叫code work space，然后你怎么做，选择刚才的空文件夹给它点开，点开之后呢，给你工作区起个名字，比如说这名字我也叫幺零，幺零，这样的话你再点保存就可以了，比如说这个给大家截过来啊，你进入到工作区中，然后到这个界面。就是你输入啊里边的这个名字。我把这个啊给大家。截过来啊，就这部分。

然后这个做到之后啊，咱再回来。在里边，比如现在我再点保存。然后咱看啊，你再看目前的变化，这里边就变成了你看。是不是叫工作区啊，现在就是工作区了，所以你这里边啊，它这点要稍微麻烦一点，这工作区不能直接创建，你需要用我们的空件夹给它手动创建出来啊，就是这么一个基本过程，然后创建之后大家看啊，这1010是我刚才写那个名字啊，工作区叫这名字，然后它生有这个文件，咱的代码就是在这个里边来进行编写。啊，这个啊，是咱们这么一种创建方式啊，给大家做了一个说明啊，然后各位一会儿自己按照我刚才这过程给他自己实际操作一遍。啊，这个做到了啊，然后做到之后，比如说现在你再打开，你想打开某工作区，那怎么做呢？里边有一个叫打开工作区，比如说打开我之前那个啊，之前那个我应该是叫VS1010，然后你把它点开你看啊。

这是一个文件，你选中文件点打开它就可以了。啊，这是之前工作区，然后咱一会儿在这里边，我们来写这个测试代码。这个啊，是咱们。说的啊，这么一个过程啊，所以各位注意啊，我们在装这we code之后，第一个需要先安装这么四个插件，是咱后面用到的，然后第二个我们需要建个工作区，但是工作区不能直接创建，咱需要按照这个过程，就是你建个空件夹，然后用s code打开，再将工作区另存为你给工作区起个名字，然后最后啊它就可以。创建出工作区的过程啊，这是我们做的这么一个步骤啊，各位一会儿给他实际操作一遍啊。然后这个做到之后啊，咱下面把这个过程基本完成了啊，当然你可以改一下它那个什么字体大小啊，里边都有，就是你点里边。就这位置啊，有一个叫什么设置，然后设置中有文本编辑器。

啊，把这个点开，你看里边比如说有字体啊，包括它的大小，根据实际自己去改啊，这我就不改了，里边都有啊。你都是中文嘛，咱应该都能找到啊，所以这样的话，把这个工具我们就装上了啊，主要这么一个基本过程啊，这是关于white code的一个基本使用。然后这个使用之后啊，咱们来简单试个小效果，怎么试效果呢？就这里边啊，默认我这名字叫code，因为T01是我后面创建的，那比如说我在里边要写代码怎么写，第一步就是你右键点中你工作区的名称，然后你可以新建个文件夹，假如我建一个我就叫。DEMO1啊，这是我创建的，然后创建完DEMO1之后，在里边我可以建个文件，因为它没有直接类型文件，你可以建个文件，假如这个文件，比如我就叫零一.html啊，这是咱们建的一个HT文件啊，它就这么做，就是右键建文件夹，文件夹中可以建文件，文件看你的不同类型也是建HTML，比如我们再建一个什么零一.js。

啊，这些都可以创建，那比如说我们就建一个HTML，在HTM中，我就简单写一段内容啊，咱就随便写个内容。比如说叫hello，这个Vs code啊，我就随便写一段那种啊，这应该是H条阶段一个最基础标签，H1标签就是它会啊，标题标签嘛，它会加粗，然后进行显示这个啊，咱写了这么一个HT页面，然后写完之后呢，比如现在我想把这HT买给头执行一下，怎么做呢？注意啊，首先咱们就是最原始方式，比如我们之前学过Tom KT，咱可以把这个页面放到tomcat中，然后通过tomcat的IP端口号进行访问，这么做可以，但是目前咱们用这个工具之后不需要tomcat，因为它里面给咱们自带的这个东西，就是我刚才装的这个插件叫live server，它就能模拟出Tom k的那个IP和端口号的效果啊，咱们可以直接执行，那怎么执行给大家演示啊，很简单，你直接点右键。

然后右键中大家看到啊，有这个东西就是它叫做open with live server，点它啊，比如现在我点一下open with live server，咱一点。然后它就会打开你当前默认浏览器，把这打开啊，注意它打开浏览器啊，是你当天默认的，因为大家知道你浏览器可以设置成默认的，比如说你设置成我这是360，那它打开你设置成谷歌，那谷歌就默认打开啊，如果你想改浏览器，那你把浏览器的设置改一下啊，就是比如说你把360设置成默认的，把谷歌变成默认的，你看这样的话就反到了。但是大家看它的访问地址一个特点啊，你看前面。是这个地址，他的地址就是。IP地址就是127.0.1，就是log house加上5500，是这个给我们自带的这个IP端口号，就是端口号是5500啊，咱就可以这么来做。

我再说一遍啊，你建文件夹里边建不同类型的文件，然后你想运行直接右键open with live server，它就会打开你当前电脑那个默认浏览器，把这个进行显示啊，就是这个效果，但是我强调啊，就是有些同学啊，可能基于他那个电脑的一些原因，他直接这么做，这个可能打不开啊，这不是这个软件问题，是你电脑中有些配置有问题，那如果说你打不开也好办，怎么做呢？你直接在浏览器中输入，也可以直接输入这个。Local house或者1270.155001回车里边就能列出你当前所有项目，然后你直接点就你点零一也可以啊，这各位注意啊，因为有些同学电脑可能基于电脑的问题，它打不开，那你直接用5500访问找到你的文件，直接点开也是可以的。

这各位注意啊，这不是软件问题，是你电脑中有配置可能有问题，比如系统啊，包括一些配置啊，但是都能做到，不管你是这么打开，或者你直接输入5500啊，这个应该可以看到。啊，但是我强调啊，如果说你右键发现没这个东西，那你就看一下这插件是否装对了，你可能就没装对，或者你装完之后没有重启，没有重新加载啊，它可能就没有。所以这个啊，就是一个最基本的使用，关于这个外扣的啊，当然还有更多，咱一会儿会继续说到。这是啊，他的这么一个操作啊，这些都演出来了啊。我把这个。