00:00
好嘞,各位,那在这一小节呢,咱们给大家讲讲VIVO脚手架的使用,哎,也就是说呢,我得赶紧让我写完的这些文件呀,运行起来,回到课件当中,我们就进入了第三章使用view脚手架,先读点定义相关的东西啊说view脚手架呢,其实就是官方提供的一个标准化的开发工具,或者呢,你说是开发平台,诶也行,就总之吧,各位你写完那个点view文件,要是没有脚手架帮着你做转换,做翻译浏览器是不认识的,是不来再读第二句说view脚手架的最新版本啊,是四版本,同学我可没说view的最新版本是四,我说的是V脚手架,咱学那框架叫什么叫V,他最开始肯定也是一版本,随后是二,目前最新的是几是三啊说老师那我们咋不学三呢?我们现在怎么还学二呢?同学之前咱不是说了吗?对吧,先把二吃透了,然后三是在二的基础上进行一丢丢的升级和改造,对吧?其实你二如果要学透了,同学3VIEW3你放心。
01:00
两天你就学完OK啊,那我刚才说的是啥,说那个四,我说的是不是有脚手架,脚手架呢,同学他最开始啊也是一版本,对不?那一点点的来位,二完了是几呢?三完了是几呢?4OK同学不是说view我用的是二版本,那view脚手架我就必须得用二版本,不是的,各位,也就是说你在左边选择这个核心技术的版本,完了在右边呢,你选择一个平台的版本,但是一般我们怎么选择呢?各位你听我说啊,一般来说这个平台呢,我们就选择最新的就可以,哎就是这个四,四呢,它向下兼容,哎,也就是说你在四的这个脚手架里边,你可以去写一写123的这些核心代码都是可以的,但是不要出现哪种搭配呢?各位说我选择了一个贼新的核心技术版本,然后我用了一个贼旧的平台,同学这就不太好,甚至有的时候都启动不起来,都会报错的,OK,所以说同学就简单记吧,咱们这个脚手架呀,一般就用最新版本,那至于说VI用呢?同学现在来说啊,就相对来。
02:00
讲在公司干开发,目前来说还是二用的相对较多,或许以后有一天三能成为主流啊,咱不是说或许肯定的是不是三可能得成为主流,但是你放心,三成为主流的时候,各位四版本绝对它的贝塔版本,就是测试版本或者公测版本肯定出来了,对吧?事物的发展顺序它就是这样的啊,行了,这咱不墨迹,同学一会儿我们用脚手架的哪个版本呀,当然是四版本,用最新版本,那V的核心技术我们用哪个版本呢?用哪个语法呢?是不是用二的呀?OK,好了,各位这儿呢,给大家一个文档,就是view脚手架的官方文档啊,你在这按住CTRL一点就能过去,或者呢,同学你在这儿也能点进去找到view的官网,这不有个生态系统吗?来看这叫v c Li。哎,说老师这不是脚手架呀,是这样的,各位,脚手架这三个汉字是我们把它翻译过来的说法,人家的纯英文名字叫做VC Li,也就是说以后我说VC Li,哎,我说view,脚手架,那都是一个意思,那既然聊到这儿了呢,就跟大家简单说几句,这个c Li指的是啥呢?其实是三个单词啊,各位我快速的说一下,那C啊指的是这个单词叫做command com man啊,那L呢,代表的是line,就是一行一列那个行,哎行嘛,一行一行的line,那个I代表什么呢?Interface,所以说直译过来叫做命令行接口工具,但是同学这个概念实在是太官方了,你比如说人家问你,哎说那个上硅谷那张老师给你讲view的时候,最后他拿啥写的啊,你说拿命令行接口工具写的,这就有点太官方,你就直接说脚手架,哎,或者说我用那个VC Li写的对不?各位好了,这呢,咱就直接一带而过了啊来点击VC Li,哎,就来到这儿了,同学你看view的生态系统很强的,对吧,核心技术是一个官网,然后那个编写代。
03:45
打的平台又是一个官网,对不,在这儿可以有些什么指南的配置项啊,这些呢,咱就不说了,用的时候咱会查的啊,这有个起步对吧,你点它就告诉你怎么去配置了啊,你看这有一个小扳手说view GS开发的标准工具,对不?或者叫标准平台,那我怎么得到这个工具呢?换句话说,脚手架在哪呢呀,我想拿回来在我的电脑上用一下,哎,那可能有些同学啊,就猜到这儿了,说老师那就下载呗,在这个里面肯定隐藏着一个下载链接,对吧,然后我一点呢,我就得到了一个什么什么什么点ZP这么一个压缩包,随后呢,我解压,解压完之后啊,哎,我就得到了一个脚手架,我就可以用了,我得承认有些库呢,确实是这么设计的,但是view不是好,回到课件当中,View说,你想创建脚手架,首先你得全局安装这个包,这个包的名字很特殊,你读一读艾服务语又斜线c Li,对吧,代表脚手架的意思,这个包只要往你的电脑上一安装,OK,你的电脑上啊,就多了一个全新的命令。
04:46
命令的名字就叫做view,以后你想创建脚手架的时候,不用打开网页,不用点下载是吧,也不用解压,你直接呼唤这个命令就可以了,好,我们测试一下啊,打开我电脑上的这个CMD,我输入view,你发现不行,它报错就证明我电脑上没有这个命令,也就是说我没有安装这个包,那接下来呢,我们把它全局安装上,各位为什么要全局安装啊,那也就意味着你安装一次以后就一直都能用这个命令了,所以说在这我写了一个仅第一次执行以后就不用了,除非你重装系统或者换电脑是不?各位好,再唠叨一句,同学,就是你进行全局安装的时候呀,你一定要把你的NPM那个地址啊配置成淘宝镜像的,如果你不配置,就会导致你下载速度特别缓慢,甚至下载的过程当中呢,会产生中断,OK,所以说执行一下,这个说老师那我也不记得我执没执行过了,那既然不记得了,我们咋的就统一执行一下呗,走你啊。
05:46
就算你配置过,你再执行一遍也没什么事了,好把它关掉,那就配置完了来吧,开始进行全局安装,给它复制一下,打开CMD粘过来回车。这个过程当中呢,可能会报一些警告,但是同学你要注意的是,这个警告不是我们造成的,那是谁造成的呢?是这个包的作者,哎,他用到的一些东西可能会发生一些警告,明白不同学,我们连代码都没写,我们冤枉啊,跟我们没关系,对吧,如果他卡住了,是这种状态,敲个回车,哎,他就继续往下走了,所以说你看着他点啊,等会。
06:35
好,各位你看啊,现在其实就已经开始出现一些警告了,对不对,安装完了吧,好把你的CMD关掉,注意一定要关掉,重新再开CMD,你得关掉一次再开一次,这时候你输入view,它绝对不报错了啊说老师那这是啥呢?这不也是错误吗?这不是错误,这是他在告诉你这个view命令都得怎么用,我们呢,不用听它告诉我们怎么用了,来回到我的课件当中,然后进入第二步,切到你要创建项目的目录,同学我都用红色的字给你写了,啥意思?就是别一上来就执行这个东西,你得切到一个你要创建项目的目录,啥意思呢?来有些人呢,敲命令的时候从来就不看自己在什么目录下,同学你要是在这儿,你去呼唤那个view命令,哎,说view,你帮我创建一个脚手架,你接下来敲下回车,那我告诉你各位,人家就把脚手架呀,诶给你创建到这儿了,然后呢,你就找不见了,诶老师我那东西呢,你得看你在哪个目录下敲的这个命令了,对吧,各位那来回到桌面。
07:36
上,我想呢,在桌面上创建这么一个脚手架,那你说得怎么办?首先保证这个目录应该已经在桌面上,现在肯定不是,现在在哪儿呢?现在在这个文件夹里呢,那你得出来,那怎么办呢?CD走,Desktop走你对吧,各位,哎,这是一个电脑常识,桌面也是个文件夹,文件夹呢,诶在这个用户名里边呢,对吧,这回就到桌面了,你比如说同学我随便来一个啊,随便来一个MK啊,这个Di来一个DEMO走,同学你看桌面上肯定会出现一个DEMO文件夹,对不?哎,这个命令你不用记,我就是测试一下,就是证明我已经在桌面上了,好了,给它删掉,然后呢,输入这个CLS,把我刚才的整个输入的历史给它清空,走,接下来同学开始输入这个命令啊,叫做view c什么意思,创建哎,Create,然后接下来给你的项目起一个名字吧,诶同学可能有点晕了,老师,什么玩意儿,你说错了吧?你不是在创建脚手架吗?那怎么在这又跟我说创建项目,这什么鬼啊,同学你听我说啊,你用这个命令。
08:36
创建出来的的的确确是脚手架,但是U官方特别给力,这个脚手架里面给你写了一个例子,那个例子的名字就叫hello word,知道不,架子给你搭好了,并且还给你写了一个非常漂亮的小案例,叫hello word,如果你不喜欢,就把这hello word删掉,替换成你真正要写的功能就可以了。OK,所以说我们管这两个东西加一起,同学,你看环境有了,例子还有了,那加一起,这不就组成一个项目了吗?是吧?各位来给你的项目起一个名字吧,说老师,好嘞,我叫view同学能不这样不,你非得跟重名啊?说老师,那我换一个Jack克瑞你咋的了?就相中这些名字了呗。同学给你的项目起名字的时候,尽可能回避这些主流库的名字,你说对不?哎,我们之前在讲包和包管理器原则的时候,应该说过这个问题,对吧,说说那我叫什么呢?你叫这个,哎哟,下划线test肯定没有主流的库是这个名字是吧?各位好,接下来敲下回车来看,这有一个选择,各位他让你选了。
09:36
选什么呢?你看default啥意思?就是执行一个默认的配置啊,就是人家在帮你创建脚手架,但是人家也很尊重你,问你一下对不?你一会儿用VIVO的哪个版本去写东西?同学你听我说,这回他问你的就不是VIVO脚手架版本了,大哥V脚手架版本在这儿呢,是吧?4.5.13,人家在这问你的是一会儿你用VIEW2的代码去写还是VIEW3的,我们当然选择哪个VIEW2,你等过一段咱们讲VIEW3你再切到这儿,那这是什么意思呢?就是你自定义对吧?哎,来调到这块,那后边的Bible啥意思呀?同学,非常简单呀,你写view的代码,难道你不写点ES6相关的GS呀,那最终是不是得转成什么呀?ES5啊,那只要一提到ES6转ES5,同学这语法转换,那马上就得提到一个人呢,谁呀,Able是吧,他专门是做ES6转ES5的嘛,那再说这个同学他是啥呢?ES Li这个东西如果你学过,咱们上硅谷的webpa教程,你一定知道他同学他是做语法检查的,哎,说白了。
10:36
有一个机器帮你检查检查,看你的GS写的合不合理,是不是出没出现过这种情况,Let一个A完了就没人管了,是吧?A以后也没有赋值对不对,你这么写这A不好呀,所以说这是语法检查的,我们选择第一个defat就可以敲下回车,就代表你选择它了,走,接下来同学他就非常努力的帮你去创建脚手架了,帮你配置好所有web pack里边的loader啊等等,所有东西依赖包也给你下载好,Hello word案例都给你写好,你需要做的就是等,哎,但是在这个过程当中,同学他也有可能卡掉,哎,就卡住不动了,你再敲下回车就好了啊,如果这个过程当中说老师我持续了15分钟以上,他都没有把脚手架创建完,赶紧检查,你绝对没有配置那个NPM的淘宝镜像啊,我们等一会儿啊等着。
11:26
一方面呢,取决于你所处位置的这个网速啊,另一方面呢,其实也取决于你这个电脑的配置吧,之前呢,见过有同学用那种特别老的电脑啊,那可能是机械硬盘啊,硬盘上可能全都是坏道啊,哎,然后就初始化这哎,结果一步一卡,一步一卡是不OK同学,完事儿了,只要出现这个单词啊,Successfully就证明你成功的创建了一个项目,叫做view_test然后接下来呢,他告诉你说,请你进入到这个文件夹里面,同学你看桌面上是不是出现这个东西了,I test,请你进入进去,然后执行这么一个命令,Npm wrong serve,注意是serve,而不是这个单词,这叫server,人家那叫R,对吧?各位好,来我们试试啊,走着CD进去,然后叫做view_test你要觉得麻烦,同学你就这样你给关了对吧,关了然后打开这对不,然后在这输入CMD,这不就进来了吗?啊一个就够来开始NPM,呃,就代表运行SV。
12:26
一四好,敲下回车走你。接下来呢,他就开始编译你整个这些代码了,我知道你可能会说,老师我还没写代码呢,人家给你写了一个hello word OK啊,等着等着他去翻译这些东西啊。OK,同学翻译完了还告诉你是吧?诶,一共耗时了多久,然后在这同学就可以看到你的这个项目了啊,他不仅帮你做了翻译,而且给你开启了一个内置的小服务器端口,在8080,你直接访问这个地址就可以了,下边这个地址呢,是给你同局域网里的其他人用的,比如说我的同事想用,那他就可以,诶输入这个地址,那我自己用,同学其实两个哪个都行,我就用这个了,给他复制一下,随后呢,打开你的这个浏览器啊,新开一个页签,把东西粘在这儿回车,各位,这就是我又精心为你准备的一个hello word这么一个组件,老师,你咋知道是hello word呢?很简单,右键检查来到view的开发者工具,同学,你瞧好了,这是谁?
13:26
VM,这是谁?所有组件的管理者谁?APP再往下,这是谁?Hello word是这意思不?各位OK,请你做到跟我相同的这一步,然后一会儿我们去干呢,一会儿我们去分析一下,就这个view test里面这些文件都是干嘛的,对吧?它是怎么写的?OK,那这一小节呢,我们先停。
我来说两句