25-尚硅谷-尚医通-前端知识点-vscode安装和使用

各位同学大家好，欢迎继续收看上硅谷视频课程，我们继续来开发上移通项目。之前内容中呢，我们完成了医院设置接口的开发，实现了院设置的增删改查操作，咱们在项目第一天提到过，我们项目呢采用的是前后端分离开发，咱们之前开发的是后端接口部分，而咱们肯定有前端页面部分。所以咱们下面就开始开发前端，因为部分在开发前端之前，首先我们先学一些基本知识，也就是先学习前端中学基础知识，学完基础知识之后，我们再来开发前端的机关内容。那这基础知识要学什么，给各位先做个介绍，咱们今天呢，主要来做这么几个事情，第一件事情呢，咱们先安装一个前端的一个开发工具，这工具我们叫做Vs code，包括这工具一会儿咱给它装上，包括给大家介绍这工具该怎么使用。

然后工具安装之后，第二部分呢，给大家来讲一个简单中一个基本知识，这个东西叫e c ma6，或者简称叫ES6，咱们来学习ES6中的一些。基本的语法，这是我们要说的第二部分，属于前端，然后这个说完之后，咱们今天的第三部分给各位来讲一个前端的框架，这框架叫vuee，或者说叫view，这是第三部分，再来学习vuee，包括vuee中的最基本的指令等等一些相关操作，然后这个说完之后，我们今天的下一部分咱们来讲这个内容。给大家来讲解，就是关于这个叫AX iOS，然后写一下第四个。Ais是什么呢？它是一个工具，用它可以实现阿贾克操作，然后这个说完之后，我们的下一部分给各位来介绍另外一个框架，叫做element UI。

所以咱们今天的主要内容讲的都是前端中的基础知识，咱们把前端基础知识学完之后，最后我们再来开发相关的内容，这是关于内容的一个基本介绍，然后介绍之后呢，首先我们先看第一部分。咱们先安装一个前端工具，叫外code，那这东西怎么用，给各位自我介绍，咱们看一下我的课件中。首先这里边前端咱之前解释过，前端的主要作用是不是用于调用后端接口得到数据，然后把数据做个显示，而我们在开发前端的时候，咱们肯定不用这个idea开发工具，而我们要选一个新的工具性开发，这工具就叫做white code。外code呢，各位可以从网上下载，我给大家也提供了一个外code安装工具，这工具安装没有什么特别地方，各位直接下一步下一步安装就可以了，我这工具已经装上了，就是这么一个工具叫white code。

然后工具安装之后，我们需要做件事情，什么事情呢？在工具里边需要安装一些插件，其实这些插件咱也不安装也可以，也能够用工具，但是你装完插件之后，你的工具会更方便，这插件其实有很多，我们这里边建议各位至少装这么四个，因为这四个我们安装之后，我们操作起来会更加方便，那这插件怎么装，给各位做个介绍，首先你把工具先装上，装上之后。点击里边这个位置就一个叫扩展，然后在扩展里边呢，这位置咱们在应用商店中搜索你的扩展，首先我们装的第一个是这个东西，就是里边你可以搜索一个叫tennis。咱们装它，而这个是什么呢？给各位强调，这个是一个中文简体包，就是你装完之后，你这里显示都是中文，这是第一个插件，各位直接搜索装就可以了，第二个叫liver。

这个是什么呢？其实它是一个模拟服务端，一个效果，咱们之前访问某个页面，我们需要通过to hi平访问，而用它之后里边就内置的一个服务器直接进行操作，然后第三个和第四个都是vuee相关的一些工具，用它能够更方便性开发，所以建议各位至少安装这么四个插件，中文的服务器的和vouee的相关的工具，这是我们的第二部分，各位做到。然后做到之后在里边，我们在这个位置可以搜索，包括设置，比如它的大小等等啊，主要是你把这个工具装上，然后工具装完之后再看下面怎么做，就是现在呢，因为我们用的是一个外code开发前端，而前端开发跟咱们的后端接口开发类似，咱们开发后端的时候大家注意。我们是不是要建个工程，工程里面是不是要建包啊，包里面是不是要建类的，而现在咱开发前端跟我们的后端类似，我们在里边也需要建个东西，但是这个东西我们叫什么呢？它叫工作区，我们代码都是写到工作区中，所以下面给各位演示，再我们来创建工作区，然后在里边怎么来建个文件夹，包括怎么建一个页面。

给各位做一个小题演示，首先我们看，咱们把这打开，我们点文件，大家发现这文件中呢，并没有直接创建工作区的按钮，所以咱们需要用其他方式把工作区创建，就类似于我们建一个工程，那工作区怎么创建，给各位来做一个演示。首先，第一步。咱们可以先建一个空文件夹，比如现在我建一个空的文件夹，这个文件夹我起个名字就叫做预约挂号。DEMO。

这是我放进文件夹。然后创建之后呢，咱们现在在工作区中把它打开啊，比如我就叫预约挂号这文件夹，然后创建之后，咱在工作区中把它打开，然后这里边这个位置，我就是打开文件夹，找到刚才我创业那个预约挂号就是这个。然后把它选择大家看目前就打开了文件夹，但是只文件夹它不是工作区，然后打开之后怎么做呢？咱们就是下一步把这个工作区另存为我们需要点它，然后点完之后选择刚才文件夹在里边给你工作区，我们可以起个名字。比如这个名字我就叫这个预约挂号，然后咱们点保存，现在大家看这位置是不是有工作区啊，咱们把它就换成创建，然后创建之后我在工作区中我可以创建，就是建一个。

包括建一个文件夹，包括里边建相关的内容就可以了，所以这是一个工作区的这么一个保存，这各位这个要知道，在那里边就可以创建一个工作区。然后创建之后里边就是这么一个基本结构，咱们在工作区中可以做这个具体的开发，这是我们做一个说明，包括你创建之后，你也可以打开一些工作区，比如说咱们打开我工作区，我就找一个我之前打开的，比如咱就用这个。我把它做个打开。所以现在我们就把这个说完了，然后说完之后呢，你在里边呢，就是你可以建文件夹，比如现在我建文件夹，假如我叫这个DEMO。然后在文件夹中你可以创建文件，但是它的文件需要你手动加后缀名，比如咱们写一个hello.html大家看是不是一个二条文件，在文件中你可以写入你的切换内容，比如说我写个标签H1，我就叫哈。

这是我们完成的一个标签，然后完成之后咱们把这页面可以做一个访问，怎么访问呢？咱们就直接点右键，然后里面看这个叫open with live server是我刚才装的就是这个插件。注意是否记得啊，刚才我们刚装这个插件，然后用它可以直接通过浏览器进行访问，那咱现在把它就访问一下。我们看是不是能访问到，但我强调在有些浏览器中呢，这个可能没法直接用，那也很简单，你直接通过它的IP地址加端口号，端口号默认是5500，然后找到你文件夹，把它也可以进行一个访问，这过程都是一样的。所以现在咱们就是完成了y code使用的这么一个基本介绍里边就这么来用，所以各位把这给它装上，然后给它用法给他自己去练习一遍。