00:00
好嘞,各位,咱们接着聊,说说第二种创建VIEWU3工程的方式,那我就先把这个关掉,这个呢也关掉,然后这文件夹啊,我放在这儿,同学,这个是我们讲V基础的,这个是VIEW2的脚手架,这个呢VIEW3的脚手架,好回到笔记里面打开,第二种就是使用V去创建一个VIEW3的工程,那么具体步骤是什么呢?诶放在这儿了,官方文档里面所写的步骤在这儿呢?我也给大家总结了,其实是在下方这儿呢,啊来回到这儿,各位肯定有一个疑问啊,就是老师,什么是V呢?来在这儿呢,给大家写好了,是新一代的前端构建工具,说老师,那现在这一代的是谁呢?当然是它呀,Webpa对吧?各位你想想什么react脚手架,View脚手架,目前来说不都依赖着webpa的吗?没有了webpa,那这些脚手架呢,也就不能工作了,那么这个VT既然说自己是新一代的前端构建工具,就好像有一种感觉,它好像要挑战一下wagapeg,对吧?
01:00
可能有些同学说老师那不可能的wepa啊,绝对是构建工具领域的老大哥,你无法撼动他的位置,同学也未必啊,因为这个V呢是由雨西团队打造的,目前来说有很多的优势啊,我简单的呢给大家总结了一下啊,这儿呢也有官网,咱们先去官网看一眼吧,来走。他自己啊,是这么形容自己的,哎,他没说新一代,哎,他说下一代的前端开发与构建工具同学,根儿啊落在这儿了,只要一说他是构建工具同学,那我们就不陌生了,你比如说在webpa之前还有谁呀?还有这个东西吧,Ground啊,还有谁呢?GA,然后后来出现的哎,这个webpa,那目前说谁比较火呢?肯定是we pack对吧?那这个东西未来能发展成什么样呢?我们拭目以待,目前来说确实是挺好的,启动速度啊也挺快的,他自己呢,说了自己很多的优点,如果各位有兴趣可以去打开开始去研究研究,目前来说在我的这个课堂上,咱们不去详细的去说这个V,因为啥同学这不是几个小节就能说完的,你想想webpa如果你真想从入门到精通啊,对它每一个loader都很熟悉,每一个功能点都能非常顺畅的搭建出来,不是一件容易的事儿,你得踩很多的坑啊,如果这个what以后发展的势头越来越猛啊,生态越来越好,或许我们以后有一天哎会出一一整套的教程去讲解这个V。
02:20
OK,现在呢,我们先不关注这些啊,粗略的给大家描述一下它的优势啊。首先第一个开发环境中无需打包,可快速的冷启动,同学可以这样讲,这个是最牛最牛的地方,冷启动,而且很快,注意无需打包,咱们之前的构建工具就是属于,哎呀,你只要npm run serve马上就进行打包,但是它不是了,哎,再读第二个,它能轻量的快速的热重载啊,HMR,哎,说白了就是你一改代码他就做局部刷新,Webpa也有这功能,但是他说它比人家更清亮,更快速啊。再看第三个就是真正的按需编译,不再等待整个应用编译完成,说老师怎么理解不了呢?什么叫等待整个应用编译完成,什么叫快速冷启动?就算我不学V,人家问我,我也得说明白呀。来,在这儿呢,给大家准备了两幅图,这两幅图是来自于V官网的对比,左边呢说的就是这种传统构建工。
03:20
Webpa的工作模式右边呢,它说的是自己的工作模式,我们简单看一下啊各位就是大概有一个了解webpa的工作模式呢,是这样的,一进来有一个什么intry入口文件,然后分析什么,哎,分析路由了对不对?哎,有多少个规则啊,什么路径看哪个,然后再进而分析什么呢模块,最终把这些东西进行一次,诶打包,随后再告诉你server ready啥意思,服务器准备好了,哪台服务器啊,哥们儿,就是这个8080,这台服务器准备好了,然后呢,你用,所以说我们每次执行npm run so的时候都得等一段时间,那等的是什么呀?就是打包的这个过程,哎,这是web pack的工作模式,那么wait呢?哎,同学换路子了,你看啊,特别聪明,他一上来,诶各位serve ready啥意思?诶,就有种感觉,8080准备好了,但是同学我们看这图明白啊,你说这不就是一空壳服务器吗?没有把这些东西进行一次打包,文件准备好。
04:20
好了,再告诉你serve ready完全反着来,一上来就是准备好了吗?准备好了啊,然后其实呢,等着你去看,你比如说你发起了一个HTTP请求,也就是说你输入了一个什么什么样的路径,随后你看着各位,诶,他进来了,哎,从入口文件进来了,因为他已经知道你要看的是什么了,他就去找到那个路由,然后就去分析这个路由里面所对应的这些模块,然后最终呢,告诉你,诶你看东西我给你弄好了,哎,有没有这种感觉,同学它的启动速度咋的会更快,但有些同学可能说了,老师这块启动的时候啊,确实慢一点,但是东西都准备好了呀,那你这老师怎么有种感觉,他骗人呢,一上来就告诉我准备好了,完结果呢,东西都是现用现分析,哎,同学,你说对了,他就是在骗你,他就是在现用现分析,你看人写的叫啥动态的引入和代码的分割都是动态的,说老师那速度能快吗?速度很快,比webpag要强啊,具体强多少?同学,这个呢,咱也没有进行量化,官方呢也没有给咱们。
05:20
说提升了百分之多少,所以在这儿呢,同学咱就不研究了,哎,就这两幅图出去呢,能给人家形容明白是不?哎,那一会儿呢,我们就测试一下,看看这速度啊,到底快不快,那么用这个V去创建VIEW3的工程的步骤是什么呢?在这儿呢,你也可以不看我这个步骤啊,那看哪呢?看这诶同学,这是VIEW3的文档,里面在教你如何一步一步的利用V去创建一个VIEW3的工程,那在这儿呢,我也给大家整理好了,对吧,一步一步来,首先看第一步就是。Npm in ne,然后是VAPP,这些东西是不可变的,然后在这儿换成你工程的名字,OK啊,然后呢,再进入工程目录,然后呢再安装所有依赖同学你注意啊,它有这一步,来咱们写写吧,各位回到桌面这啊,然后呢,我创建这么一个CMD,然后开始输入啊,叫做NPM能在这输入吗?不行,是不是得到桌面啊,CD top n PM给need,然后叫做wait,杠APP跟上你这个项目的名字,我就叫做VIEW3下划线test,但是后边再来一个下划线wait,好看着啊同学,敲回车走。
06:27
说老师没快是吧?哎,这会儿呢,你第一次使用可能会等一小会儿啊,说老师完事了,这么快吗?比刚才好像确实快了很长时间,刚才这家等的哈,你那视频录了那么长时间,好几分钟,同学他在这套路你了,刚才我创建这个view u3的脚手架就通过cri是咋的呢?各位他不仅是把东西都给你弄好了,你没发现依赖也给你安装好了吗?这么多note models你瞧吗?各位这东西都给你弄好了是不但在这儿啊同学是属于什么呢?来你回到这儿看文件和文件夹啥的都给你准备好了,但是没有啥,没有那个依赖包,哎,所以说同学他教你了,他说你得进去啊CD这个VIEW3,然后呢,下划线test_wait进来,进来之后呢,你自己亲手的NP mi一下,哎,他把这个过程啊给你省略了,让你自己去完成啊,稍等一会儿,同学,我们先不去特别关注说创建工程的速度啊,因为这个东西没有什么特别大的意义,除非说它俩相差的时间特别长,咱们要研究的是工程创建完了,启动工程的时候它的速度,以及我修改代码的。
07:28
然后它的速度对吧,各位稍等一会儿啊。这块也不会很大。OK,安装完了吧,好各位,那接下来呢,我运行一下NPM,说说老师这回还是serve不是了,各位看一下这啊,打开它这告诉我们了,这回可不是serve,这回是啥叫做dev,哎,是dev了,来给它关掉,这也关掉,直接输入dev回车看一下效果啊。稍等。哎,就启动了啊,说老师跟刚才比快了吗?来咱试试啊各位我把这个CMD啊也给他开好,这个是我们用c Li创建的,哎,这个呢是我们用V创建的,这样当然它们两个呢小一点啊,这个呢也小一点。
08:11
左边c Li,右边V清空一下,这块呢,叫做NPMDV,哎,那这块呢,NPM让什么呢?Serve啊,没法一起摁,那咋办呢?是吧?来在这边快点啊,回车回车来看一下他们两个的速度啊,明显这边要快,对吗?各位你觉不觉得比我刚才启动还要快,那你这边呢,等着吧,是吧,整个这个过程其实它就在打包啊,所以说他们两个相比呢,VAT的优势还是很明显的啊来我们看一下啊,V创建出来的这个VIEW3呢,给我们提供了一个什么样的页面啊来走比刚才那要精简,哎,完了他做了一个这个求和的这个案例啊走,你看一点击它就在这变啊,他告诉你,请你编辑components下的hello word.view这个组件,然后呢,去测试一下HMR啥意思,热膜替换,也就是我们刚才笔记里所说的这个啊,叫做热重载,热重载热膜替换,都是一个意思,说老师这一对比相对来说还是。
09:11
Bit优势大呀,启动速度也快是吧,哎,方方面面都挺好的,那我们接下来写代码就用这个呗,同学不用这个,我们依然用最传统的c Li所创建出来的这个工程啊,也就是说这个啊,为什么说呢?因为目前来说同学V还没有进行大规模的应用,以后呢,没准是趋势,所以说在这儿呢,同学我们用wait这种方式创建出来的这个工程啊,只是让大家知道一下,只是让大家了解一下,OK,好,那这一小节呢,我们听。
我来说两句