00:00
下面呢,我们来搭建缪脚手架配置,开发流程呢,也是先开发开发模式,然后是生产模式,然后是合并,最后是优化。我们先从开发模式开始。这里呢,我们提前准备好的一个文件夹里面呢,它有两个文件,pe.dvd jspe d pdd JS,这两个文件呢,就是从我们上节从RA脚手架配置中复制过来的。因为很多配置都是相近的,所以我们没必要再重新写了。OK,我们接下来调整啊,首先要调整的就是我们要把ras这些东西给删掉啊的,这个热模化替换HR8功能呢,咱们是不需要了,所以把这个插件删掉。插件删掉OK,然后呢,这个自动补全文件扩展,你看咱们补充的是view文件。这里要稍微注意一下,因为view文件是view文件结尾,同时这个处理JS的时候也是,它不需要处理view啊,咱们处理JS就好了,不需要处理GSX。
01:07
好了,那么到这里呢,我们做的一些基本改动,那么还需要改动什么呢?改动的原因就是我们将来要写的是view文件,Real组件,Real文件没有人编。那么view编译的话呢,需要用上一个load的,叫view load。Reload怎么用?我们来看官方文档,直接百度搜reallo的real-load这个关键字,那么第一个就是我们realload的官方文档,它会告诉你real load是什么,是外派d load,它能够让我们去编译view的这些单文件组件。怎么用呢?在起步这里有写。首先我们需要下载V和view的一个模板编译的一个插件。我们下载。诶,答案呢,下载之前我们得初始化拍Jason啊。先初始化包描述文件,咱们再去下载。
02:04
OK,让我下来。好,下载完之后呢,它上面就会告诉你一些原因啊,怎么做呢,我们需要进行一个这样的load的配置,并且还需要new调用这个插件,最终呢,它就能够帮我们编译这些view的单文件组件了。好,我们来配置,首先增加一个,这样loader在下面增加。OK,然后呢,再去又调这个插件,这个插件呢,来自于will load。好,那么这个用的话呢,后面它会报一个小小的错误啊,后面来看。OK。到这里呢,还没配置完成,往下走一走啊,它在这里说到,如果我们要处理样式的话,不能用dialo了,得用real dial loader real dial loader才能够帮我们更好的处理咱们的这个主机中的样式,所以我们要把之前的dialoer改成6DIALOER,当然这个包也需要下载。
03:08
好了,那么到这里配置呢,我们的这个配置就基本完成,当然它还会存在一些小的问题,我们后续要一一解决啊。来回顾一下我们做法就是。加的改成了,加改成。然后呢,删除了HMR的功能。然后添加了一个新的load real load去处理room的单文件组件,然后JS改成JS。然后文件扩展名,点JS改成点view,然后同时用上的这个插件。好,此时我们把一代下载好,下来呢,就可以去测试了。那么这里还是要下载一些依赖啊。对了,我们这里还差一步啊,就是yes things的配置,还有这个咱们的Bible配置,咱们还没有指定,所以这一块我们要指定一下。
04:00
那么我们先下载吧。好,我们先下一部分。OK,然后呢,还有less load。Thus,还有sty road。OK,往下走一走。没有了。乐的应该下载过了。OK,然后呢,到这里应该就全部下载完成,还有外派这些包啊,派派c pack d server。OK,我们去下载。好了,那么此时呢,我们还需要新建两个配置文件啊,来指示这个yes和这个BB需要干什么事。
05:03
那么yes意思呢?同样的,我们要继承咱们。六官方的这个规则,那么配置呢,我们在我们的文件中找啊。来到我们这个配置项中,在其他配置里面有啊,所以这里我们就不去去记了。我们复制就好了。这里面呢,它去继承了咱们view官方规则,因为我们用的是VIEW3啊,所以继承的是VIEW3规则,同时它还继承了咱们的这个ES光头规则,两个规则都继承了。然后呢,这里启用了node的一些环境变量,所以我们可以使用啊标目录就是当前,然后呢,解析选项用的BB这个解析选项。那么这里呢,这两个不需要你去安装了,这里面它已经自带安装了,我们要安装的就是这个。的这个。解析选项啊。这个包去安装一下。好了,这是是一些的配置,那么这里面就是基本上用的是咱们view的官方配置了。
06:04
好了,那么我们还需要去做BA的配置。DEMO配置呢,也是继承这个秘团队的这个DEMO配置就好了,那么这个包呢,也是需要下载的,但是后面部分不需要下,只需要下前面部分。下载real继承,那么这里OK了,那么它里面的和re一样啊,它也做了各种优化,所以我们也只需要用就OK了。好了,等所有的东西都下完了之后呢,我们可以尝试让他去打包一个谬代码,我们来看效果。那么这个时候我们需要新建一个SC。还需要新建一个public。下面的换着一个in。
07:02
那么我们这里打包的是VCY。需要一个idpp OK就好了,然后呢C下面呢,我们继续打包的入口还是魅JS。我们用上VIEW3啊,那么我们把VIEW3下载一下PMI。那么默认下载的view的版本呢,就是咱们的V3的版本。OK,然后呢,我们引入view啊,VIEW3和VI2是有些不太一样的,VIEW3创建的话呢,要通过一个create APP方法去创建,然后呢,我们再引入APP组建。那么因为我们在so解析选项的时候写了可以解析这个点B文件,所以我们可以不用写文件扩展名了。face APP放入我们的APP组件,然后通过慢测方法挂载到咱们的某个页面的某个元素上。好,因为我们取名字是APP,所以这样挂载就好了。那么下面我们还需要定义APP文件。
08:03
那么APP呢,是一个单文件的一个组件,所以它里面写法是几个标签啊。Script。和。OK scope呢,咱们不需要啊,Tenm呢,就是页面结构,月三呢,不再需要一个根元素了,所以我们直接写就好了,Hello APP。里面呢,我们可以定一些选项。对吧,那幕咱们当然就不多写了啊,大家有兴趣会写写写对写什么都可以。三号里面可以写样式。比如说我们这里就叫title吧。我们给它一个颜色。Pink好了,那么view中的样式呢?是在color pink啊,是在我们的这个style里面写的。OK,那么这样呢,我们就把这个基本代码写好了,下面我们就用我们的这个第一环境的配置去编译它,打包它,那么我们把指定也给输一下,定义一下。
09:08
同样的,需要通过cross。Inv来定义这个no的UV的这个环境变量。等于这个development,然后呢,再去打包激活这个DV server配置we serve。带一个。下面的DVD。好,那么这样呢,我们的这个开发模式的指令就定义好了,我们再定个star。偏不让第一笔。好了,那么现在呢,我们PM2就可以启动运行了,那么这时候应该会存在一些问题,对我们cross UV还没下,所以需要下载一下。OK,再去打包。这时候会存在一些问题啊,我们一起来看,首先它会报错啊。
10:00
呃,插件view呢,在这里面说明了我们有一个插件包没有下啊,Yes in发ing-view这个插件我们需要下,因为我们yes in此RC这里用上了这里我们这里前面呢,我们用上了这个插件,那么这个继承的插件呢,需要用上这个包才能够使用。这里我前面没有下啊,我需要下载一下。好了,下载完成我们再运行,这时候会有一些报错啊。我们再观察页面报错啊,OK,它现在呢,提示的是运行成功,Successful没问题,OK,没问题啊,那么页面也解析出来的这个view的内容,但是此时我们检查审查的话呢,它会有个警告啊。它会有一个future,这是VIEW3的特性啊,它有两个标识,两个环境变量的标识,叫view options API和这个view pd DV,这个tools API就是这两个东西啊,它没有定义。没有定义的话呢,它这里就会出现这个警告,所以不太好,我们需要定义这两个标识,因为它view内部需要使用。
11:06
那么怎么定义这两个标识呢?第两个环境变量呢?我们既我们希望啊是在代码内部使用,那么就不能通过cross env cross nv只能给pad使用,而我们view代码要想使用就得引入这个东西。我们外派上面专门有一个插件,用来定义这个环境变量的,叫DeFine。专门用来定义环境变量给我们代码去使用的。我们来new调用这个插件。LD的话,这边呢,有这个啊option API要不要用呢?我们允许用就为true啊,然后呢,在什么生产模式下,这个这个开发工具要不要出现,那肯定是不出现的,所以为false。这里面呢,我们是去解啊,定义一些环境变量。
12:05
这里还是写下cross。因为定义的环境变量。是给咱们外派使用打包工具使用的。那么这个DeFined定义的黄金变量才是给源代码使用的。是这样的,那么这样呢?从而解决日三应力报错的问题。当左下角是警告啊。好了,这时候我们再次打包。因为改了配置,需要再次打包。OK,效果还是有,然后呢,他也没有问题。
13:03
而且我们做完这个配置呢,我们可以看看它这个HMR功能啊,到底有没有啊,我们也可以试试,我们再定一个新的组件,我们先创建文件夹吧,那么view呢,一般文件夹常见的是叫views,在这下面我们可以定义一个组件叫home。然后叫industry view好了,那么这个代码呢,我就能复制就复制了,要是写不写就写写吧,就这个title。我这叫home,抬头吧。OK,我改一个颜色啊,比如说叫d pink。OK,那么组件名叫home。Home。OK,写好了之后呢,我们在APP中把组件引进来。Import home from咱们的这个下面的home这个组件,然后呢,在view中组件引入之后要进行component注册啊,最后才能在上面使用。
14:02
V3呢,不再需要跟标签了,所以直接写就OK了。下面看效果呗,诶咱们的home就加载成功了,然后呢,到底有没有这个HR功能呢,我们也可以看一看。首先我们先改样式代码。我们来到这个后面的JS,我们再给它加一加吧。我们聊聊,加个风扇。把大小变成2030PS1保存,哎,这时候热模块替换就能看到了,它没有更新整个页面,只直行局部更新。好,然后呢,我们把这个内容也改一改一保存啊,他也没有刷新整个页面,也只是进行局部更新。所以这个热门化替换功能呢,它通过view style load,还有view load这两个东西帮助我们实现了样式和JS的这个热门化替换功能,所以我们并不需要再去写了。所以这个view的配置呢,会相对来讲也会比较简单,那么这就是我们开发模式下的这个view的配置。
15:05
一起最终综合回顾一下,整个配置呢,就是view,主要关注于view的模块怎么编译啊,因为其他模块编译还是一样的,我们要使用一个view loader,然view loader用用法呢,还需要录一个插件,以及要把之前的cell loader替换成view style loader,最终才可以处理好所有的view文件,包括view的样式。这里面最后要改的细节就是GS要改成GS,要改成JS,以及我们之前处理什么GSS文件要变成用文件,这样就会自动补全文件扩展名了。然后呢,E in和B的配置分别做出了改变啊,因为他们都要使用view的官方规则。然后还要需要下载一些依赖包,总而言之,它报错什么,就说明我们少下载一些包啊,把它下下来就好了。最后呢,页面运三呢,会有个报错啊,因为它要求我们定义一个环两个环境变量。那么只要把它们定义好就好了。
16:01
OK,那么这个定义环境变量呢,我们通过派的一个插件去使用的。Fine。那么这个插件定义的环境变量呢?最终源代码可以使用,最终又可以使用。好了以上呢,这里就是我们这个。写法,当然呢,我们也可以给大家演示一下。最后啊,演示一下这个。View的这个前端路由的用法,因为我们给没有之前给大家开启的这个功能啊,但是我们没有演示,最后演示一下吧。我们这里呢,跟之前一样写法about。好啊,演示一下的话呢,我们这里面写的内容呢,我们就简单一点啊,能简单就简单about。然后呢,这些类名都不需要。OK,最简单的一个bos,好,这里呢,我们用东西的话,我们需要下载NP mi view。
17:05
Re的用法呢?它是这样的,需要在这里配RO。配置完root之后,我们需要在面底JS中使用,最终才能生效。OK,我们引入vita。Re,上面呢,有一个。的一个方法。呃,RO啊,写错了,所以这个提示没有出现,然后呢,我们默认暴露这个。Create,它就会产生一个RO对象,我们最终在mid中应用就好了,在这里呢,我们需要指定我们的使用的模式,啊模式呢,它也它也通过一个方法叫做create web history来创建这个history模式的这个路由。然后通过Rose来进行路由配置。我们这里呢,就直接进行路由朗加载了。我们直接引入后。
18:01
那么RA中的路由中的路由哪加载它会比RA会简单一点,它直接cost一个home。等于一个这样的一个箭头函数,直接import引入即可。诶,他不需要写什么lazy spaces啊,直接这样写就好了,中的路由待载会比MU中的路由待载的会难得多啊。好,我们在这里面呢,再写一个对象pass,就是它路径写一个home,那么组件呢,叫component加组件,就是home组件。OK,看不单词写错了,然后呢,我们再来一个about。加载about键。OK,那么配置路由就配置好了,最后路由要想用的话呢,需要在面底中引入应用才会生效。
19:00
要在创建之后,挂载之前通过use去安装应用这个root配置,那么路由才会生效。好,那么我们在APP中继续改造啊,像之前一样改造。路由呢?它提供了两个路由组件,将root link是用来路由跳转的。毛病。后,然后呢,去哪里。去协调后。OK,然后复制一份,我们再来个。同时它这里加载显示多组件就简单了,通过root view就可以加载显示多组件了,不需要这么费劲。好,下面我们就以看效果,那么home组件也不需要引入,也不需要注册了。因为路由里面已经有了,当一旦地址发生变化,MOU会自动的根据地址去加载对应的组件进行渲染。
20:02
好,这时候我们只要启动就能看到效果了。OK,启动成功,那么点击home,它会加载home之间,点击about加载之间没有任何问题。然后这两个组件呢,都是进行了路由打连载,所以刷新的时候啊,原如现在是abouts,那么它一上来应该只加载这个about组件,对吧,当我点击home的时候,才会动态加载home组件的代码。好了,以上呢,就是我们开发环境的所有配置了,在RA要架的基础上进行修改呢,我们会发现很多东西都相似。所以操作起来会比较的轻松。
我来说两句