day03【项目前端相关基础知识一】/12-尚硅谷-谷粒学院-前端技术-抽取代码片段

就是刚才呢，咱是入案例做到了，然后下面给大家演示这么一个东西啊，刚才我一直说到VE这个写法的结构是比较固定的，就是这里边啊，每次你都要写个div，每次都引入，每次都new，这些应该都一样，咱不一样的应该就是里边内容不一样，所以针对这种情况下，咱可以怎么做呢？咱可以把这段代码抽取出一个东西来。就类似咱们Java中，比如我有相同代码可以写一个工具类中，后面可以共用，现在在vouee中也有类似操作，就是咱们用的code可以做个抽取，而抽取什么呢？这边一个术语描述，它叫这个词叫做代码片段，也就是说把你相同的公共部分代码可以做个抽取，然后每次这个代码咱有个快捷键就能够自动生成出来，而不需要每次都去写这个东西，这叫做代码片段。啊，所以咱们下面把这个代码片段给我抽取，为了后面方便，因为咱抽取之后，后面再写的话，每次这些固定值不需要写了，直接用这个快捷键生出来，就好比说我们刚才点个感叹号能生成代码一样，啊，这个叫代码片段，所以咱下面做这么一个操作，抽取一个代码片段。

啊，我们来抽取一下啊。写一下就是抽取voe等。代码片段。那怎么抽取给大家说明啊，我这课件中应该说写的很详细了，它的做法就是咱先选中这些地方，我把这直接截过来啊，就是一个固定的，比如一会我操作啊。首先怎么做，你在we code中先去选中里边比如说有一个叫文件，文件后面的收选项里边有一个叫用户代码片段，然后咱们点一个叫新建代码片段，在里边给你的代码片段几个名字，而这个名字它里边的后缀名是这个就是前面可以改啊，但是咱用我这个默认就可以了，Voe，比如说HTML，我们用这个后缀名，这名字的后缀名不能变，咱就是这么来做啊，那现在我们来测试一下哈，把这个演示一下。

做法就是在we Co中点文件，然后点这个叫首选项，在首选项中有一个叫用户代码片段，咱点它点完之后，在这个位置我们可以新建代码片段，就这个，因为我之前见过啊，这边点它要新建全局片段文件，咱点它之后，这里边让咱们输一个名字啊，这是我之前自己创建过的，比如说我建一个，我把名字改一下啊，我叫这个。三。然后这个点完之后，咱们点保存这个片段文件创建出来了，但是里边的默认没有东西，咱需要给它加点内容，就加一个模板上的东西，这模板我在里边给大家都写出来了，你把我课件中这个东西直接复制过来就可以，然后直接把这给它替换掉。

这就一段这个模板包模板中大家看啊，就是在这个代码啊，就这部分，那现在这个就完成了，咱就完成了一个代码片段的创建啊，就这么一个做法，然后这个创建之后，我们有什么好处呢？给大家说明啊，比如说现在我再来建一个H文件。咱再随便建一个啊零二。就是测试我们那个代码片段。啊，代码片段点HTML，那我在创建之后呢，现在这些代码都能生出来，那怎么生成呢？大家看我刚才那个代码片段中有一段代码啊，就是它的第一行你看啊。这是不是叫VETL，这个代码就是我们生成代码的快捷键，当然你可以改啊，不改默认就是我这里写的就叫vetl，那比如现在我直接数这个值叫vet。大家看是不是出来了，因为我见过多个啊，如果你没见多个，只有一个，那我现在一点。

大家看这代码是不是就出来了，你看里边啊，有voe的部分，有new这个部分，因为我刚才说的固定部分里边都有，咱需要写的就是取值和定义理的这个基本数据啊，这就是VE这个代码片段抽取啊，我再操作一遍啊。我再快速说一遍啊，咱点这个首选项，就是文件首选项，然后点用户代码片段，点完之后咱点新建这个东西在里边，你给它起个名字，后缀名不能变，前面可以变，然后写完之后把这里边打开，把我刚才就是那个内容。就是我课件中的内容直接复制过来，然后复制之后就可以了，咱们再去写代码的时候，你直接输一个快捷键，就输几个字母VE。啊，VEHTML把它一点这个代码就出来了啊，用这个快捷键就直接几个字母可以做到，这是咱们做抽取，而这么做极大提高我们这个开发速度啊，咱们带有同步东西，不需要代写。

这个叫代码片段，我们做了一个抽取啊，就是这么一个过程，就大家啊，把这些准备工作都做到啊，这些都是为了我们后面快速开发的。这个啊，我们就完成了啊。