00:00
大家好,上节课我们will做了一些开发的一个体验,这是我们上节课,呃给大家写的一些代码,看到了有数据可以响应式,对吧,我们做开发,那我们上节课用的方式呢,是使用CDN的方式,当然了,我们觉得CDN比较慢,也可以用什么下载安装的方式,如果你做一个小项目,这样做没问题。用到它的小能式,然后呢,解决问题也可以用虚拟盗目,也就是will的方式去开发,你整个项目是可以完成的,但是呢,如果项目比较大,这样的开发是比较复杂的,那我们比如说我们用X access请求网络服务,你这块得继续引入很多个包。另外呢,我们在开发的时候呢,开发完项目之后,我们还需要打包上线运行,对吧,那我们这里边呢,还打不了包对吧?所以呢,我们要结合web pack来帮我完成,那我们前面呢学过webpa,我们可以用自己手动的用webpa搭建出一个view的一个开发环境,帮助我们用view开发完可以打包上线,但是这样做呢,很复杂,从诞生的时候呢,刚开始的时候我们是这样做的,但是随着技术的不断的升级,那么官方呢,给我们开发了一个。
01:12
Will脚手架,那什么是V的脚手架呢?有可能你第一次。接触到脚手架这样的一个概念,那脚手架是干嘛的,就是。看到view脚手架叫C,那外派呢,也有脚手架外派C对不对,是一个意思,都是什么?Command like interface命令行界面。这就是指的是官方的脚手架,那脚手架是什么作用呢?相当于帮我们把项目的开发模型都给我们创建完了。里边该引入的都给我们引入了。当然了,咱们还是说随着技术的不断引进,那最早呢,我们使用的VIVO的脚手架呢,是二的版本,那二的版本呢,我们在使用的时候,它虽然比我们手动的用ipad去配置会方便一些,但是呢,有大量的配置文件需要我们去修改,非常的麻烦。
02:04
那后来呢,到VIVO的脚手架三三的时候呢,给我们的一种体验呢,就是零配置,把大量的web pack的一个配置文件,那些需要的那些插件的包配置文件都给我们隐藏了,让我们感觉是一种零配置的,那现在呢是嗯,VIVO c r这个脚手架呢,四以上的版本,那四到三的升级呢,就不多了,只是做了一些优化。是这样的一个情况,所以呢,脚手架是干嘛的,就是默认已经帮我们搭建好了一套利用外部派来管理VE项目的一个结构。所以呢,我们用上脚手架开发,才是我们真正的一个开发项目的一个工具。所以我们正式开发项目的时候都是用脚手架,那我们刚接触月油的时候,我们也直接用脚手架就可以了,当然了,我不会去给你讲用外派从手工搭建一个,让你了解一个过程,这个脚手夹怎么搭建的,学这个现在有必要吗?没有必要了,因为技术在升级,在迭代,对吧?官方已经帮我们搭建好了,没有必要再回到原始时代那种方式去开发了。
03:10
那我也不会给你去用VIVO什么二二呢,一般的我们在什么1718年的时候用的是比较多,那在一八年,呃中旬之后都是用什么VIVO脚手架三了,我说的脚手架的版本到四了,而VIVO本身的版本现在到三,它是两个东西,一个是脚手架,是一个开发项目的一个结构,VIVO呢,我们可以看成是框架,可以看作是一种语言。这是两个东西啊,所以呢,VIVO本身版本咱们现在是用VIVO3这个版本,而VIVO脚手架咱们现在是用四以上的版本。应该是4.5几这样的一个版本。所以呢,你现在在这个时代学习都是程序在不断优化迭代,现在不能说他还会再继续升级,不能说现在是完美,但是现在应用可比以前省事多了。如果我们现在是在两年前在学习这个,呃,VIVO的时候,那学脚手架有可能我会给你讲一天的时间,那如果你们有外派的基础呢,咱们用外派搭建呢,有很多两天时间来学习一个脚手架的一个搭建。
04:09
但是现在咱们有可能用十分钟就学会了什么VIVO最新版本销售架比原来不光是功能强大了,而且我们使用的就特别方便了,这就是技术迭代的一个进步,什么东西都封装好了,那就说我就想了解原理,我自己外派的大U环境没人拦着你,但是我觉得你搭建的环境不如没有您官方给我们提供这脚手架给我搭建的好。对吧,而且呢,还有很容易出错。另外呢,多人在配合的时候呢,那也不太好配合,配置文件的形式什么都不一样,所以呢。我。非常不建议你用外pad单独去搭建VIVO脚手架这个功能,也不建议用老版本的脚手架,因为老标手架呢,支持VIVO新版本也是不太好用的。好,那大家了解就下,那咱们用的时候装完之后用的时候你就像外部派一样,去应用我们的一个项打包啊,编辑啊,自动刷新页面啊,对吧,自动运行啊这些都可以了,好,那我们就安装一下。
05:07
安装命令呢,使用NPM1到让器呢是全机安装,那现在的安装方式呢,是使用什么这种安装方式,以前的安装方式呢?二以前的是这样的。VI杠,这个现在呢不是了啊,三以后的版本是这样去安装,别忘了,所以呢,我们安装一下全局安装,比如说我们就在这个下,这个安装用的是安装全局,而并不是安装这个目录下,所以你不用什么n PM in install n PM,什么initt,什么杠Y先初始化一个,建一个JS文件什么的,先不用。因为我们是全局安装的啊,相当相当于安装到你操作系统里了,那在每个项目下边你都可以用,对吧,咱讲NPM包的时候说过in道你可以点写,这是没问题的啊,然后呢,钢记放到哪都行,然后at。没有。VE。C Li,你看这是我们安装的一个方式,然后回撤全局安装,你现在需要的就是等待,继续等待这个时间很长,那我这块就快进一下。
06:15
好,我们安装完了,我就用快进了一下,安装完了,不然需要等待用了这么多秒,对吧,然后呢,我们看一下。安装的VE脚手架版本是4.5.9,应该是现在的最新版本,因为咱们现在什么研究指定,他会按最新版本给我们安装。那VIVO脚手架里边自带vouee的这些东西咱就不用管了,对吧,那么说安装完了为什么我目录下什么都没有啊,对不对,它是安装到全局下了,那么安装完了之后,我们用这个脚手架创建的项目,就像我们用这个呃,Web storm一样,创建项目的时候才会有你那些配置文件的一些结构才可以,那我们创建项目那VE2的时候和。呃,和我们VUEE3这样的,就是脚手架二之前的和三之后的创建的是不一样的,我们现在装完之后,你可以看一下这个版本可以使用vuee。
07:05
Vuee杠杠vrin看一下版本,你看这个或者使用VE杠大V,这是这是一样的啊。都是简写的,简写一般都是用一个这样大写的这样的方式去帮我们完成的,那脚手架这样已经给我们安装完了,那我们创建项目使用什么命令呢?我们使用的是VE创建,我就不说VE2的时候是怎么创建了,因为二的时候它是VE什么,然后create加上什么web pack,然后项目名称,那比较麻烦,那我们这块创建用什么创建呢?你看VE用VE。这个相当于用VE的脚手架啊,VE脚手架去创建一个项目,你项目的名称你可以随便写,那比如说我可以叫DEMO,比如说我们的DEMO1吧,这原来这中间有一个DEMO,那它就会相当于给我们创建了一个目录结构,这会儿会有大量的提示,我一个一个给大家讲价。你看。等看一下。在这个界面。
08:00
看到了吧,请选择一个你喜欢的一个什么,你想要的一个配置,这里边有两种,看到了吧,一个是去有三种啊,一个是创建VUE2的项目。一个是缺省的模板,一个是用VE3创建项目,因为我们现在装的最新版它直接支持VUE3,所以这块有三种,这两种通过是方向键上下键去选择,然后呢回车确定,那我们创建的肯定是VUEE3的项目,VUEE2对吧,以后你就可以不用了,当然你了解一些老项目的话,也可以去了解,那么创建是VE3项目,看到了吗?选择这种方式创新项目里边默认给我们带了两个插件。就外派的时候能配置的时候,一个是B干嘛用的,专门把ES6的语法转成浏览器兼容的ES5支持的,对吧,一个是ES另。用来干嘛?用来检查我们的语法的,也可以自动修复,对不对,按照一定的规则对吧,比如说呃,A bnb啊这样的规则帮我们检查语法,修复我们手动写加语法不规范的让团队规范的,这我们在讲呃外派的时候已经详细讲过了。
09:07
那下边这个是可以选择什么,手动的选择我们的配置,手动的选择我们配置,那我们现在先用默认的创建一个项目,我们再手动的创建项目,看一下这两者它有什么区别,二我就不选择了,现在选择三,可以用三来创建,你看然后这里边儿你可以指定什么,你在这以后在安装插件的时候,你是使用亚去。这个页去安装呢,还是NPM去安装呢,那咱们前面这两个都讲过了,那咱们呃习惯使用NM对吧,那咱就选择NPM。然后这块就开始创建,开始创建项目,他该下载的下载。对吧,该创建的创建,该生成的生成,那我们这块也需要一个等待,当然你选择默认的插件越多,这块创建的速度肯定就越慢。对吧,但是他默认配置呢,他就给我们选择两个还好一些,然后呢,所有的配置文件或者什么都给我们生成了,都是使用默认的,我们什么也不管,所以呢,用默认的这个配置是比较方便的。
10:06
那有的时候默认功能,那假如说我需要这里边儿,假如说VES功能有状态管理的,或者是root路由管理的这样功能,那我想用怎么办?那你手工配置对吧,那不手工配置呢,我们在写项目的时候,我们一样可以干嘛呀。我们也可以通过导入包的方式去配置。都可以,所以呢,通常我们一般用默认配置就可以了,那这块呢,也需要一段时间,他一个包一个包儿下载。我们第一次上电可以等待一下,如果你网速好的话。会快一些。当我们手动创建的时候,它这个速度就会更慢,因为手动的时候会选择更多的包。啊,创建完了,创建完了之后,告诉我们可以进入到这个项目目录。对吧,然后我们使用npmn server,这个知道运行什么吧,运行pack点阶层里边不有个script那个脚本吗?里边运行的这个命令告诉我们就运行这个外派,我们运行一样,对吧,它就在这块监听,然后呢,数据有改变,自动打包编译运行是这样的一个情况,那我们来看一下。
11:03
装完之后,我们这块相当于刷新一下,你看就有了一个单一这个目录看到了吗?在这里边那。在项目里边,这个我们就不是在V3,这相当于这相当于我们在根目录对不对,在里边创建了一个项目带目一,那我们来一个一个理解一下这个目录对吧?第三方的库,我们所有应应用的第三方库。Every嘛,它的根目录都在这里边,它自动安装的这些和我们以后要用NPM手动安装的库,它都在这里边。先开这个,然后这里边我们看一下下边这几个是为这个项目当前的项目创建的配置文件,那我们说了,刚才老师你不说。我们的配置不是零配置吗?为什么还有这些配置文件呢?你看啊拍点JS这个你肯定知道对吧,这个是装NPM装软件的,这个一定得有啊,我们得知道我们装什么软件,你看在。运行环境下,我们需要用到vuee,它是VUEE3对吧,当然这个锁定版本里边,你看这是锁定版本,也就是这个版本是不确定的,那现在呢,我如果更新安装的话,如果我NPM包里边有更新,它有3.4了,对吧,那我。
12:09
现在是3.0,我只要按这个,我直接重新install下n PM install下它会重新按照这个给我找这个最新版本去安装,只是默认这个框架在你的版本,那如果我在NT下,因为速太慢不用了,他有可能就给我升到最新的这个版本了,对吧。那这个呢,是这些版本都是不固定不确定的,对不对,你看这样是三对不对,是改最后的这个版本对吧,那个这个建建号呢,是改中间这个版本,让他找最高的。找中间版本最高的波浪线,找最好版本最高对不对,这都是不确定的,如果确定的版本它会写到这里边,那下次再更新的时候呢,他当然这里边锁定的版本去更新,这个是咱们前NTML的时候就说过,但是3.0和3.0.4差距不大,这我这就不动了啊,你看到是咱们用的是VUEE3这个。就可以了,你看到是VE3就没问题。那这个我们看到了,这里边这个版本,然后下边呢,是开发的时候依赖开发的时候,你看咱们用默认的给我们八部装上了ES link装上了对不对,然后呢,七服务,因为它通过这个服务去加载的外派D什么东西,这些都我们加上了,对吧?然后呢,We link link link的插件等等这些都给我们装上了,看到了吧?下边呢,你看有ES linkk的一个配置文件,他给我们装把。
13:22
这个检查代码的ES link配置文件给我们装到哪,给我们装到这个character的文件里边。对吧。它使用的是默认的这个通用的这个规则,帮我们检查语法,当然咱们可以选啊,选择咱们学外派的时候,安装的时候,什么嗯,AIR,什么DNB啊,那个插件都是可以的。啊。然后这是选项,你看这个浏览器的一个检查的一个兼容性大于百分之对吧,一的所有浏览器都支持,支持最新两个版本的浏览器,不要死掉的浏览器,这个浏览器的兼容性发布给我们找的时候你看。在这块对吧。
14:00
配置文件都写在这个排产阶层里边了。那这里边儿。这个ES的兼容性我看啊,那咱们再继续看这里边一个文件,一个文件,我给大家解释一下。那这个呢,他把这个的配置文件单独提出来了。单独提出来了,呃,你可以看一下导着包,然后这锁定文件没有用,然后这个呢,是我们的read密文件,也就是你项目将来上传的GI hob什么的,你得有一个文档对不对,对项目进行说明,别人才能看到你项目下载,你项目使用对吧,写不写都行,什么战略都无所谓,这个是get,如果我们用get来管理这项目的时候,那。就需要有这个文件对吧?这里边这个目录啊,这个目录呢,是苹果下边的一个目录,写在这个文件里,意思是我们在我电上提交的时候,苹果默认建的这个目录,你需要提交吗?不需要提交对吧?那这个目录软件包需提交吗?也不需要提交,就像我把项目拷给你,我用给你拷这个目录吗?不用给你拷这个目录。你直接什么n PM install安装一下,就会把软件重新下载过来,如果你考这个的话,传来下去太大的话太大了,对不对。
15:01
那这个是我们打包编译完之后,生成我们打包后的程序的一个目录,这几个都不需要往上传的,都不需要往上传的,当然这里边儿如果你在家的话,也可以加一些新的东西,比如说我们现在用外派。呃,用那个web在这里边建的这个项目,你看。当然这这个项目里面没有这个东西,对不对,如果你是直接我把项目就建到这目录下,如果有这个目录,你也可以把这个目录不行,这没有用,因为这个是什么web给我们建的目录等等。那其他的都是本地文件啊,这些东西啊,就不能传的,这是get的这篇文件不用改,你动都不用动,除非你什么不想提交你再去动对吧,发的平时单也不用也不用去改,就这个的时候偶尔咱们去看看对吧,所以呢,相当于也是零配置,你都不用去改,什么都不用动就可以了。那这里边除了这些src什么的,我们建外派D的时候是不是也得见src对吧?是我们写目录的源码目录,你这里边写HTM文件呢,写。当然了,我们说了外派,外派不是外派,View有两大特点,一大特点是数据据响应式,对吧,虚拟盗墓的这样的一个模式,一个是组件式开发,所以呢,我们写的都是组件,而TM基本不写,而M我们自主写,那他这个SR型目录呢,你看这个就给我们提供一个默认的一个组件,那下节课呢,我们会用一下这个啊去用一下,因为咱们现在还没学组件,组件概念大家有可能还不清楚,对吧,然后这个呢,是我们。
16:25
主入口的JS文件,他通过这个JS文件去找很多很多第三方的JS文件都加载进来,打包到我们想要的那个地址,目录下默认址目录下目录我们都可以改啊。那这个目录什么呢?这个目录是我们写源码的时候,解源码的时候,里边放的静态资源的一些目录,比如说图片啊,CSS啊,对吧?解公共的GS啊,都可以放在这里边啊,那这里边放了一个VE的logo的一个这样的图片,这个是放我们组件,它默认给我们提供了一个欢迎界面嘛,帮我创建一个欢迎界面,给我们提供了一个组件,那我们所有的小组件都放在这里边,然后在大组件里边去调用。
17:03
其实我们这个组件就是在这个组件里边去调用的,然后在他这里边打包的,打包之后会生成到这里边儿来。那这里边儿的这个目录。这节目的结构一定要了解,因为你开发的时候就是在找这些目录,对不对?那public是什么呢?Public目录呢,相当于我们的什么呢?我们的静态的。呃,资源他会原封不动的给我们打包,不像说我们自己原来用外派打包的时候,我们会把HTML给我们打包到什么里边,他原封不动的把里边的所有资源拷贝到我们打包的目录,我们打包的是地址目录,那我们看一下,那我们就运行下打包的目录,你看我们这里边给我们提供两个命令,如果你不知道怎么运行怎么打包的话。这边提供了三个啊,一个是Li检查代码的,一个是build是编译的一个,这个呢是我们开发的时候用的对不对,你看它调用的都是脚手架里边的服务,对吧,其中的这个服务,这个交加服务比我们build的给我们什么打包编译对吧,这个呢相当于电内存里编译。那这个呢,用的呢,会相当于给我们生成的一个打包的目录,那我们来看一下。
18:01
我们使用我们先build一下啊,使用NP npm ru运行谁呢?运行build,那运行build呢,它就会执行这个命令,对不对,诶这里边儿呃有错误。这边有错误,这是什么错误呢?告诉我们没有这个文件根本运行不了,也就没有这个文件就找不到这为什么没有这个文件呢?我现在在VE3的目录对不对?我得切换到DEMO1这个目录,对吧?在这个目录下我再执行这个命令。啊,我得找对目录,不然的话,他找这个文件的时候,他找不到这个脚本,找不到脚本就运行不了这个命令,现在并命令打包编译看一下,打包编译完之后会在我们DEMO1里边啊,因为我们在项目里边,你看是默认生成Dis,就是打包好的目录,打包好目录里边,你看CSS文件就默认的CS文件给我们压缩了,对不对,那图片文件对吧,给我们也是用logo,你看打包成这个名字了对吧,就是在我们怕在这个里边呢。这个。Logo你看给我们加上了哈西对不对,这个名字跟我们自己做的不一样嘛,然后JS文件。
19:07
对吧。都打包了。打包运行是这样,到这个目录下,那而TML呢,在这里边的文件,你看这里边文件现在有什么,有一个图标对吧,你看图标原封不动的拷过来,这里边写什么文件,他都原封不动的拷过来,那一代尔TML这里边。啊,也原封不动跑过来在这块,只是在这给我们压缩了一下,但是呢,里边内容没有动,所以我们在这里边写的任何的,呃,VIVO代码它不是不会给我们解析的,所以呢,我们都是写组件的方式啊,那下节课咱们再说先了解下这个,那如果我现在想运行一下。不打包,我就平时在开发的时候,开发的时候我运行是这样运行的,你看啊是使用NP。呃,Serve VE要跟这个接身,这个文件里边就要对上serve VE没有R,如果你想加的话,这么加都是叫SVE啊,别搞错了,然后这个速度呢会比较快。
20:02
啊。一旦放这了,你看就给我们起了一个八零的一个端口在这块,这就是我们运行起来的这个页面对吧,那如果我们打包好之后的运行了,那你就直接访问什么访问这里边儿的。这个音带随变对吧,这是打包之后这么运行,你这么去运行。对吧,但是这块你现在什么也看不到。打包之后把那些东西都去掉了,那我们在开发的时候,现在是这么运行的,对吧,那现在如果我有一个小小的一个改变,它会自动给我们刷新。怎么把这个两个。拿过来。你看在下边重新编译发信,那假如说我在这个里边找一个呃,它组件写到哈,这个组件里输出一个hello word。你看这块输出welcome这个对不对,这些东西输出这个消息,那我现在。嗯,把这个。Hard word在哪输出呢?嗯。
21:01
这个组件好家伙。现在这个一缩小就。知道吧,我这里边儿。找到。先看一下界面在哪块。随便改一下,随便改一下这里边,比如说我把这里面所有的东西都给删掉。你看所有东西都可以删掉,这都没关系的。因为我们也不用这些东西,他给我们提供了一个默认的一个什么页面,但我现在还没保存呢,如果我保存。我想把这两个一起打开,你去看一下这个效果,你看删掉之后,它会自动帮我们保存对吧,自动刷新,我什么都没动,你看就变成这样页面了,对吧。自动帮我们保存发。我随便的有一个改动,你看我这块CTRLD很多LCRD对吧,CRLS,你看自动编译很快的,然后页面就会变成这样了。对吧,这就是自动保存刷新。这是我们跟外派功能是很像的就可以了。我们来停止这个服务,建议你体验一下这个过程,那我们有了这个,我们还可以干嘛呀,咱说了这是创建这个项目,我们再回到我们这个目录。
22:07
咱说还有另外一种创建项目的一个方式,还有另外一种创建项目的方式什么呢?这个呢,咱们也要说一下使用什么VE创建。你看创建什么呢?创建我们的项目叫DEMO2,我换了一个名叫DEMO2,那同样会提示我选择什么,选择VUEE2啊,还是VE3呢,这样的一个模式来等待一下啊。全省了二三,那咱们还是选择三,但是呢,我现在这块不是选择三,我到时选择手动配置,因为咱们前边选择的是这个,现在呢,换上这个去选择。你看这里边儿,那我们选择的就多了。默认组件,你看他给我们选择了vuee的,对吧,选择这个vuee的版本这块,然后呢,你看这里边有这么多选项,这个呢,Typescript呢,它是微软的,呃,一个脚本,相当于加va块的一个增强版,语法有点类似于Java对吧,那咱用不上,咱就就不选了,这个呢是做用UE,比如做APP的一个支持的,咱现在呢,客人也不用也用不上。
23:05
那这个呢,是路由,咱们后期可用创建一个可以选上,那这个VX,这个是做状态管理的,后期咱们得用,当然了我不选择,我都可以用NPM线装的啊,然后这个CSS啊去处理处理CSS,也就是比如说把那种呃SARS还有LSS我们转成CSS语法的,那比如说我们也要用这些项目要用。都可以,这个呃,Li就跟ES Li是一个东西,它指的这个名称叫的不一样,就是检查我们的什么语法规范的这个,这个呢是单元测试,这个呢是in d to ED,就端对端测试,这两个测试呢,咱也用不上,那就选择这些,那这些都选择完之后,我们用空格去选择啊,选择上了,当然你可以取消,比如说这个我们选中了,咱空格取消,咱空格选上现在空格对不对,然后回车就到这了,到这呢,这一步要我们选择什么,选择你是。呃,Vuee GS的是二点叉,就二以后的版本还是三以后的版本,对吧,那我们现在肯定讲的是VUE3呢,那我肯定用VE3的版本,对吧,这笔选择错了。
24:04
然后呢,这块儿因为我们选的那插件,选的那件呢,就会一个一个提示我怎么配置,你比如说这块就选择我们路由,当我们讲路由的时候,你就知道了,我们有一种是和history,就是历史模式,就是路由里边上一个路由的历史在哪,是选择这种模式还是其他的模式,那这块我们肯定就用历史模式,那我们就Y回车,然后呢,又提示我这个插件对吧?是我们使用这个预处理post CSS的时候,这插件的时候是处理的是呃S呢还是nice呢,对不对。那这会SS呢,还有两个,这两个noe的还是大对不对,这两个呢是一样的,只不过是处理效率的问题,对吧?那我们就用默认的,那我们就支持,比如说SSCSS吧,你也可以选择less都可以啊,只要选一个就行去处理,这是咱们在ipad的时候也都讲过它,你看它自动在这里边都可以帮我们支持,然后又开始选择我需要的这个插件了,那我需要的插件是什么呢?是ESD对不对?那选择ESD的这个插件的时候,ESD在检查语法的时候呢,有我们几个标准对吧,可以使用AR AR bnb,这个呢,是我们以前处理过的一个标准,记不记得。
25:07
呃,我们以前在处理。呃,就是在讲外pad的时候装个插件,就是用的这规范对不对,那他可以使用这种规范,这种规范那你都可以到网上去查一下这些规范,他都检查什么样的语法,按照什么样的规范对不对,比如说这是标准的对不对,这是这个,那我们就全选第一个用默认的这个规范。然后这里边,嗯,这个呢,并且就是让我们有这个规范去检查我们的语法,直接让我们手动的去出现错误,手动的一个一去改呢,还是让我们自动修复啊,使用fix自动修复啊,提交的时候自动修复我们代码,当然了,谁愿意一个改我们写的代码多一个空格,少空格这样的是很正常的代码,对不对,但是呢,为它检查都是错误,编译通过不了的,所以呢,我们肯定要是自动修复,所以我们就选择下边的,一定要选择这个自动修复才能修复代码,我们编译才能通过,选择这个。然后我们回车。啊。
26:01
这个选择,这一个不是排斥的东西。选择另角和修复。有选上还能怎么样?然后嗯,说我们这些你看啊,你需要的这个配置文件,发布的配置文件,ESD的配置文件等等,对吧,是独立的配置文件还是在派置点阶层中呢,把它加到这里边呢。那我们原来默认加的是不是都在派阶中啊,那我们如果在派配在阶层中,那我们相对配置中间个数少了,因为他们配置也不多,所以呢,通常我们都是放到这个里边,那咱们现在创项目需要对吧?那你可以想单独配置,单独有配置文件,那你可以怎么着使用这个。使用位让它有单独的配成店,那我们就单独配成店看一下,跟他默认创建包能做一个对比,其实这都无所谓了,然后呢,保存对吧,作为一个配置一个项目保存吗?假如说我们保存的话,那我们下次再创建项目,因为刚才咱做这么多配置,它会记录下来了,下次我在创建项目的时候呢,就直接有了,在默认的里边我们就有了,就不用去弄了,那我们是保存对吧,那项目的名称呢,我们假如说就叫代码。
27:09
九二。你看,然后现在咱们需要的就是等待,等待他给我们在创建这个项目,按照我们的规则去创建。刚才一系列的规则,这是手动创建项目,手动创建项目的自定义性很强。那默认的呢,就是比较简单对吧。那这个创建过程后边不会有提示了,直接就创建完就会有一个DEMO2了,我这块也快进一下。这个过程其实是很慢的啊,为什么说这个过程很慢呢?因为咱们手动多选了一些第三方的扩展包,对吧,那多选择第三方扩展包呢,它都需要一个一个的去下载,帮我们打包到就是呃,我们的这个项目里边来。好,快冲电了。在这块,他还得一个一个包。
28:14
好,给我们创完了,你看我们创建完了运行,它给我们生成了一个这个目录,我们把这些都给我们,呃,缩回来,你看下,又给我们多了一个项目目录,这是DEMO1,这是DEMO2。你看二的时候给我们创建的这个文件里边,你看有这么多。有这么多,你看啊,这个还是我们的第三方库的目录,还是public,对吧,里边没有变化,Src里边给我们多了很多这样的一个目录结构,因为我们这里边装了root组件,你以后写路由的时候在这里写,那加了一个这个你写VEX的时候写,呃,状态管理的时候在这里边写。然后呢,这个呢,就是我们放资源的地方,对吧,这个呢,给我们放组件的地方,这个呢,它多了一个value value这什么意思呢,你看。
29:00
因为他这块用路由给我这给我们装路由了,默认给我们建了一个路由的结构,一个关于页面,一个页面首页和这个。多了两个页面,和我默认的建的不一样,他把路由的结构写好了,当然了,我们路由后面的现学的,学的时候我们再来看。这是主程序,那么说了这个也是放组件的,这也放组件的,这两目有啥区别呢?这个是放小组件的,比如说在一个一个页面里边,一个按钮啊,一个缓存播放啊,一个栏目啊,对吧,一个列表啊,这些小组件,而这个呢,是放我们大组件的,为有相当于配置,你比如说首页关于页面对吧,分类页面,文章页面这些属于大组件,我们放到这个下边,那零散的小组件我们放到这下边,这是这样的一个区别啊。那我们再看配置文件,它多了这几个,这个是这里边儿的对吧。没什么区别,但是它配置文件比我们默认的中还少了,为什么?因为你看他把好多的配置文件比我们提出来了,你比如说浏览器的支持的,你看提到这块来了,对不对?我们原来的都是在passenger杰这里边,然后这个是编辑器相关的。
30:06
对吧,我们现在暂时用的这个编辑器相关的编器多少换行嘛,对吧,它这我加了,然后ES这个Li的ES Li的一个配置文件在这块,这还是get的配置文件啊,这个还是八部的配置文件,因密和那什么没什么区别,这就可以了,那同样我们运行的时候使用NP。Nter v VE啊,不要加二,嗯,错了,得到什么,得到DEMO2这个目录下跟刚才一样,犯了同样的错误,你得运行哪,因为现在是两个项目了,对不对?一个默认创建的,一个手工创建的。所以运行起来,运行起来呢,看他给我们分配的端口是多少。这个没有自动打开浏览器,那我们手动点一下吧。你看这个有两个页面了,你看不是原来我们那一个页面看到了吧,两个页面可以切换的,你看上面的路由在变换。的变化,那咱们可以顺着这个路由,假,假如有多个页面项目,我们可以继续继续写下去。
31:03
然后我们改变它也会变,那下节课咱们再说这节课只要看一下这个结构,当然编一打包我们一样可以用六的,这是没区别的啊,这是没区别的,那另外还有一点。我们现在在创建项目,比如说我在创建一个DEMO3RE,就是VEVDEMO3,假如说我在创建第三个项目的时候,你看。创建的时候,让我们选择的时候就多了一个选择,因为我们在创建代码二的时候,我们把创建那个过程我们给保存起来了,你看就给我们形成了一个模板,出现了代二,这模板我们起的名嘛,代二对不对,然后呢,里边装上了S斯这种转换的对吧?八部的路由的路的ex的对吧,这是默认的,当然我们也可以再手工的对不对,那这里边是也是V用到的VE3的,那我们选择这个,现在一回车就给我们直接创建DEMO2这个模板了,就不用我们再创建了,那它这个是保存到哪去呢?那我以后再打开工具,它总有这个模板,那你以后创建再手工配置的板,你再去手工配置的话,还可以保存一个名,你给创建很多套模板,这些模板是保存到哪去了呢?
32:09
给大家看一下,保存到这了。在这个里面。不是在这里边,这是我们相比啊,你看。操作系统里边。都有一个这个目录对吧,在这个目录下。列表,他把一些软件装的一些配置,因为在本地保存嘛,你看get的配置啊NPM,咱们的默认的配置啊,对不对,这里边都有,你看这个vuee这个配置它保存到这了,我们打开。看这里边的内容啊。这个文件没有减压器,你看给我们保存到这了,在这块DEMO2看到了吗?没有,那如果我想在创建的时候不希望它有这个DEMO2,那我就干嘛呀,你把这个文件删掉就行了,如果这里边创建多个模板,想删除一个文件,你把那里边那个接挑出来就行了,因为咱现在就这一个模板,如果有多个模板啊,你只删除里边一个,那就删文件内容,那如果就这一个的话,那我就直接。
33:01
行动,他。一类删除掉就没了,没了之后你看我先CTRL系我创建啊,我现在在为了上级代三。我们等待一下,你看在这儿又恢复到默认的模板了,所以它是记录到你操作系统里边是这样的一个情况啊啊这节课时间咱们挺长了,咱们主要讲的框架安装和创建项目,和项目的目录结构分析,以及创建项目的一个配置,那下节课呢,我们写些小案例,再改一些配置。
我来说两句