00:00
刚刚呢,咱们是通过了两种方式把V3的项目呢创建出来了,现在呢,我把这两个命令窗口啊,全都给它关掉,咱们不用了,咱们是在Vs code里边去演示效果,所以说关于这个目录咱们也都不要了啊。打开我的Vs code里边有两个目录啊,咱们主要是看VIEW3-study的这一个,点开它之后呢,下边这些文件咱们在VIEW2里边介绍过是吧?比如说这个点s lit RC,这里边可以配置ES lint语法检查的一些操作。呃,再比如说呢,这里边有baible的一些相关配置,目前呢,咱们没有用到什么插件,只是用到了一些部分的预设包啊,这个不需要改变,然后呢,这里边有一个ts comp哥点Jason是吧,咱们之前讲TS的时候也遇到过啊,不需要做什么太多的配置啊,最终呢,他会把我们src目录下边对应的这个TS该怎么变译还怎么编译啊。好,那src目录下边,这里边和V2当中不一样了,首先我们可以看到这块有一个命点TS,这个是程序的主入口文件了。
01:03
程序的这个主入口文件,但是它是一个TS文件,注意啊,是命点TS。因为咱们这里边采用的是TS的方式吧,那以前VIVO2里边的话,咱们没有用TS,所以说那个时候是m.JS啊,那在这里边,这里边首先引入的是一个c re createp,它是一个函数,这个函数可以创建对应的这个应用,然后产生这个应用的实例对象,那下边这个位置引入的是APP这个组件,应该说所有组件的负极组件好,下边这个位置是什么呢?创建这个APP应用,返回对应的实例对象,然后调用什么呢?调用这个want mont方法进行挂载,那挂载到哪呢?挂载到idv APP的这个div上面去,那这个景APP在哪呢?我们可以看一下啊,在public目录当中有一个index.html,这里边有一个div,它的ID是APP,最终呢,所有的组件产生完毕之后呢,会在这个div当中进行渲染啊。
02:22
那这个是MTS的一个解释啊。VIEW3当中,把很多的这个函数呢,都放到view里边进行封装,我们需要哪一个就直接引入哪一个就可以了,这个m.tS咱们暂且说到这里,app.view是我们的组件,大家可以看一下啊,上边的这个位置和VR当中有什么不同的地方?一会儿呢,他可能会爆一个红色的波浪线,是因为我Vs code里边装了那个我一个插件那个插件啊,会做这个ES语法检查的一个操作啊,所以说呢,如果说我找到文件首选项设置之,我在这里边去搜esl。如果这啊,对VE tr这个插件啊,如果把它勾干掉,这个时候呢,我们再来看那个红线就没有了啊,那这个是V3当中的HTML模板内容,下边是专门写TS和GS代码的,这里边是样式是吧?那这里边和VIEW2当中对比。
03:17
有什么不一样的地方呢?我们可以看一下1234。啊,这里边儿有一个不一样的地方,说V2种,V2种。的这个HTML模板中必须要有一对什么呢?跟标签。啊,那有三种。的这个组件的HTML模板中可以没有什么呢,那个跟标签。根标签它也是可以的啊,那下边这个位置能够写L等于TS,说明里边可以写内部的啊,可以写TS代码啊,这里边这里可以使用TS的代码,还有下边的这个位置。
04:02
从view当中引入了一个叫DeFine component component,什么意思啊,定义组件它啊,函数啊,目的是。定义一个组件,大家可以看一下这个位置最终是什么呢?啊,暴露出去一个定义好的这么一个组件了,是吧?哎,它是一个函数,然后呢,里边可以传配置对象。第一个组件内部可以传入一个配置对象,那配置对象里边代码和之前代码是一样的,内幕是代表当前组件的名字是什么呢?是这个APP是吧?这块是什么呢?注册组件,那在这个里边它有一个什么,Hello word,这是啊,注册一个子集组件。和V2当中几乎是一样的,那下边这个位置是干嘛呢?引入一个子集组角对吧?那所以说这样来看的话,上边这个位置是引入了一个logo图片,然后下边这行代码的意思就是什么呢?使用这个子集组件。
05:09
OK,这里边代码几乎我们就已经解释完了,那下边是样式,这个没什么可说的了啊,好,那这块有个comp字目录,里边专门存放一些组件了,呃,Sa,这里边可以放了一张图片静态资源是吧?Hello word.view当中,那大家可以看一下引入啊,这里边呢,也是HTML的模板,也是可以写TS的代码是吧?也引入了DeFine component这个函数可以放入一个配置对象,然后呢,定义一个组件,并且呢暴露出去,那下边呢,也是一些样式的代码。所以说这里边这个代码呢,咱们就简单的介绍完了,没有多么复杂,和V2的几乎是一样的,但是它这个位置注意啊,它返回出这块是调用了一个函数,函数最终的返回值是一个对象,最终把这个组件对象暴露出去了啊好,那这里边儿这个代码呢,咱们暂且先介绍到这里。
我来说两句