00:00
大家好,我是学习园地的特约讲师高国峰,呃,上节课我们了解了我们的项目的目标,那这节课呢,我们开始创建项目,我们首先呢,先建一个我们的项目的文件夹,当然了,这个文件夹你最好别在桌面上建,咱们的做演示的话,我就在桌面上建,建一个你随便起个名vee的项目,当然我们项目的目录不是这个,我们得用脚手架,现在最新版的脚手架在里边再建一个项目,那这只是一个我们项目包含的一个目录,那我们呃,打开使用web stop。Web STEM呢,我们需要使用正版的,如果你需要正版序列号,请登录学习原地联系客服,要正版的序列号就可以使用了啊,我们创建项目全程使用这个,那我们新建一个项目,那我们就在这个目录下,在我们桌面的。你最好把项目建在什么,建在D盘或者是其他的盘符,不然的话在桌面里边我们重装系统就消失了,对吧?那我们创建好了这个项目,当然这项目是一个空的,然后我们打开终端,我们使用什么,我们使用vuee的脚手架的方面,Vuee,呃,C rete,当然了,脚手架怎么安装,前面咱们在VIVO的基础课程咱们都已经讲过了,创建项目,那项目名称呢?我们还延续原来的项目名,我们叫e w shop,当然了,项目名称可以根据你的项目情况自己命名,这是可以的。
01:16
等待一下,然后我们再去选择,这是原来咱们选择的DEMO3代四定义的别名,对不对,那这回咱们重新开始的项目,咱们重新做一个选择,来这里边。嗯,选择VE版本咱们肯定选择了,对吧,Bble呢咱们也选择一下,因为咱们呃用VAT那个组件的时候呢,好多插件都得用bble,所以这个个选择TS呢,你可装可不装,如果你想用嗯的语法去写呃vuee,那你就可以把这个装上,那那移动端的支持,APP支持,当暂时不用,后边咱们再用,用的时候咱们再使用呃路由咱们选择VES咱们选择呃,CSS解析咱们选择。嗯,这个就不选择了,但是建议你去选择这个,选择这个呢,你语法稍稍有点不规范,它就会提示你,对吧,能约束你的编码行为。
02:01
那单元测试和端端测试咱们就暂时不需要,不需要咱们就不选择,然后回车一下,选择版本,咱们肯定用最新的版本,VUEE3咱们创新项目对吧?那呃,V exx状态管理的模式咱们用什么呢?就用这个历史模式,就前面咱们说过的选择,然后呢,呃,选择预处理的C处理器的时候,咱们选择S吧,你选择赖都是可以的。能选择。然后呢,配置文件,咱们为了嗯怕多个文件比较乱,所为让它进入什么拍开点接S这个文件里边,比如说然后是否是保存这个项目,那刚才咱们这个所有的一系列配置,呃,如果你项目创建失败,想再重新创建一个项目引用这个配置,那你就保存一下,保存个名字呢,那我们就跟这项目名称是一样的,咱shop就可以了啊,然后我们现在就等待创建这块呢,我快进一下。好,我们创建完了,创建完项目之后,会给我们出现了一个目录什么呢。啊,Ew shop这个才是我们真正的项目的一个目录结构,那我们也想所有的操作我们需要进入到这个目录里边来,所以这块别忘了不是在这个层啊,E show进入到这个目录里边来,ER,这是它的目录结构,当然我们就用这个去看就行了。
03:11
这个目录呢,是装的所有的我们需要依赖的软件包,对吧?里边的东西你根本就不用看对吧,我们依赖的软件,那依赖的软件我们通过谁来看呢?通过这个配置文件来看我们装了什么东西对不对,像名称版本对吧?然后呢,嗯,这个服务器打包对吧?运行这个DV server用这个,然后开发运行的时候依赖需要这么几个包,UE路由U对吧?然后下边这些都是脚手架,都是开发的依赖,还有SS也装上了,然后呢,浏览器,当然这些我们都可以在这去改,对不对,我们排除了,比如说大于90%的浏览器对吧?要最后两年版本死掉的浏览器不需要。那这几个配置文件咱们看一下,呃,先一个一个看这几个,这个是get的配置文件对吧。这个get的条件,比如说这里边哪个目录,你编的目录这里边都不需要,呃上传的时候都不需要,那都放在这里边,当然你用get的时候咱们再使用,咱们现在呢,没有get,那咱们这块也不用去需要去改,当然你最好是多人开发的时候一定要给啊。
04:12
嗯,版本控制是多人开发一定是需要的啊,那咱们这是单独开发,就不来回在电梯里面去去用了,那你创建项目的时候,你可以在电里面创建都是可以的,然后跟他分支去同步就行了。B宝,咱们呢,用到一些插件的时候,会使用这些B宝,比如说咱们用VU,呃,VNT,就是有赞的那个组件库的时候,在这里边会配置那些选项,把一些组件默认的让它导入,就不用在每一个组件里边去导入了,这是配置文件,不用说了,这是所配文件固定了所有的软件的版本,所有包的版本,固定了所有版本,这样的话,我们在我把项目拷给你的时候,是不给拷这个的,对吧?那你NPM一次到安装的时候呢,那就会按照这里边固定的版本去给我们安装,而不是说按这个文件他去找最新的软件,对吧?因为你现在写的,比如说用旧版的,那你再装一个新版的库,那有可能是不匹配的,所以呢,他加了一个锁的这个文件,这个呢是呃,Read me。
05:06
Red me呢,就是嗯,你拿过的项目,特别是我们传到那个版本库,比如说get上面的时候,那看别人看这个说明怎么用应用你这个项目对吧,怎么安装,怎么运行,怎么打包,对吧?当然了,你可以在这里边编写项目,边把这个项目的一些文档用,边参考文档在这里边写,对吧,它都是Mac格式,这边就会显示,但是这个呢,也不是咱主要的要看的,对吧?这里边你可以不动,因为没什么技术难点,那我们这里边呢,还需要新建一个什么,新建一个我们VUE的一个呃,配种件。建一个vuee的一个配置文件,和我们这些是同级的,不是说在这个下边建立什么啊,在所有的这下边和我们这些配置文件都是同级的啊,看一下我们在这块创建一下。整个项目来一个vuee的,还是在那个SR下,你看一下在哪块是同级的,你就在哪建,它是1GSVE点的JS,你看如果我在这建的话,SR下边见的话。
06:02
它就会怎么着跑到这个目录下来,对吧,这样的话我们运行的时候不会自动找到的,所以你叫的名称也不会自动找到,所以呢,我们需要建这个,呃,配置文件的时候,要在项目的目录下新建一个什么。比如说新建一个JS文件V一点个点JS文件这里错了啊,然后添加,添加到变里边。这样的话,你看这样的话,我们就跟这个是同级的,我们在写配置文件的时候才可以,那配置别名的时候呢,会在这配置,那这节课呢,我们只是创建一下这个项目。那看完了配置文件,咱们再往下看这个目录,咱说了是第三方对不对,帕列它是原封不动的数据给我们拿过去,原封不动的数据给我拿过去啊,你比如说这里边。这个嗯1ex.TM是主要的主入口文件,对吧,他把这里边加载所有的打包的GS,从这开始一个一个文件去导这个文件别动,当然了,你也可以改变这个文件名称,但改变你的名称的话,你还需要再配置文件去调整,所以呢也没得必要,这个呢是我们显示的图标,我们运行起来你看一下啊,那这图标。
07:03
我们可以去换一下。NP,嗯,Ru,运行VR,把第serve起来,把服务起来,写错了,Npm ru v没有R。运行起来,运行起来之后,那我们打开浏览器,我们输入local localho。8080,因为他默认给我们提供的这个端口就8080,然后把这个做回来,做成一个这样的一个开发开发环境。然后呢,我们这个里面我们尽量都是IPH12,然后选择手机版,选择手机版,那手机版你这块可以选择什么呢?可以选择IPHONE678或者IPHONE678PLUS都可以啊,因为咱们做的都手机版这样吧,然后显示的比例我们是百分百分之吧,看起来好看一些。拿过来,然后这个缩小一下。这样的话就是按手机呃,IPhone六七八百分之百这样的一个比例显示的。那你看上面显示图标是这个,那我们可以把这个图标可以给它换掉啊。
08:04
嗯,它也是原封不动拷过去的,我们找一下这个项目的资料,项目资料里边我们把这个图片。图片,嗯,这个拿过来。我们拷到我们的这个里边啊,原封不动的拷过来粘贴,当然我们这个文件是叫PNG对吧,它呢是ICU,那我们得改一下代码,代码在哪呢,你不能,呃,咱们直接你看那同级在这里边改了。因为它现在是补组件主组的直接找,你看这个呢,是我们给我们提供的,呃,基础的一个环境,Noe给我们提供的一个基础的一个环境,那它就是相当于根目录,根目录找这个PNG找这个,你比如说这个标题,也就是找我们,你看外派里边插件里边的选项里边标题,那我们外派里边,因为我们所有的脚手架基于外派的,那外派里边就是这个项目的名称,对吧。作为这个标题,那默认这个项目,当然这个标题我们都可以改掉的啊。然后我们保存一下。刷新一下,你看这个小图标就变了,对吧,当然你就可以把原来的小图标给删掉,对吧,放在这其实也没关系,然后我们再看一下初始化。
09:07
删掉吧,没有用了,对吧,然后呢,这样我们其他的目录我们再初始化一下,比如说。我们这里边,他这是原来的这个logo这个图片对不对,那我们其他的图片,我们也不需要我们把这个图片删掉。删掉这个图片,然后我们在这里边,当然删掉这个图片,这项目里边引用就没有这个图片,没关系啊,我们在这里边还需要创建,比如说把所有的CSS建一个目录,所有的图片我们在这里边也给他建一个,因为资源嘛,对吧,IMAGS所有图片放在这里边,那我们可以找一下我们项目的时候用到的一些图片,当然这只都是临时用到的几个图片啊,你可以随便找几个图片,咱们只能做实验的时候你用,那好多项目的图片都是跟数据在一起的,是服务器发过来的,只有跟结构相关的图片才是我们需要在这里边引入的,你比如说商品的图片,那肯定在数据库存的。商品的图片对吧,那比如说跟结构相关的,比如说边框,边边角角的那些东西,包括logo,它有可能也是数据库里边传过来的,你也不需要这些呢,只是咱们做实验的时候去找那图片,方便加了一些临时的图片。
10:09
然后你还可以进,其他都可以,然后在这个目录下,咱这个咱先留下吧。这是组件,组件下边呢,把所有组件都放在下边呢,有可能也乱,所以组件一般呢,我们可以建很多层的这样的目录,那我们既然有多个页面的,那每个页面的组件我们在页面下边去创建,不用说在这儿去创建,这里边呢,我们一般的在做项目的时候,通常进两个目录,一个呢,比如说通用的com on这样的一个目录,通用的组件,什么是通用的组件呢?你只要这个组件在这个项目里边用,你到另外一个项目还想用,你只要把这个文件夹拷过去,那你这个项目的组件在内部上面都完全能用了,完全独立的,跟项目依赖关系很小。你放在这个里面。那还有内容组件。Con,呃,我们内容叫做con,呃,T内容,内容组件呢,也是在多个页面公用的组件,这也是多页面公用组件,只不过考到别的项目也可以用的,这个呢是一个意思,只不过它是当前项目依赖的,离开这个项目的一些环境就用不了的的内容组件,你可以放在这块,当然你不用一个也没关系啊,为什么分开,就因为完全独立,你在做其他项目的时候,因为程序员经常有很多项目开发嘛,那你一点点积攒这些第三方组件就好一些,放在这。
11:26
像门高度依赖放在这里就行了。然后这个是路由,呃,路由呢,我们一般也不用分录用户文件都写在一个里就行了,然后呢,这个文件里边通常呢,我们会把它划分成很多个文件,这里边会新建很多文件,为什么说这里会建很多文件,这是咱们在讲这个V前咱们也说过了,对吧?里边如果咱们用到的状态非常的多,一定要把它分成多个文件的,多个文件的,这个它现在展展示部分,呃,当我用到这个。啊,用到它的时候,用到VS地方不再分,不然在这分完之后你就比较乱了,对吧,这块先不分,然后这个里边是我们的什么。
12:04
是我们的,呃,页面组件,但是关于这个,嗯,先放这吧,当然咱也用不上,我先放在这块啊,后期呢,咱们把它都都去掉,重新自己改写,然后后面组件,但这里边所有用到的组件。我们,呃,介绍页面的时候怎么划分比较好,你看这下边儿也放组件,那这下放组件,这下边放页面级别的。页面级别的。那这里面最好是一个页面上,它又放多个组件,如果都放在这两个里边呢,你也不知道哪个页面应用过,如果是多个页面共同应用,应用到的往这两个里边放。这两个区别我已经说过了,如果只是单独的首页用到的组件,二级页面,三级页面没用上的,那你就把所有的这里每个页面单独再建一个目录。这里边每个再单独再建目录,比如说呃,后面的那我们页面,我们就所有的都放在这个组件,那是分类页面,是购物车页面,对吧?我们单独建一个目录,在目录下再建子组件,就是只是跟这个页面相关的组件放在这里边,这样呢,我们找的时候特别好找,对吧?当然了,你将所有组件放在一个目录下不是不行,对吧?当然那样的规划不好,所以呢,像我给你这么规划的,每个页面单独一个,比如说首页上是一个。
13:13
啊,假如说这里边还有咱们还有分类页面,JTG分类页面,那我们就放到分类页面下边,那比如说我们还有详情页面。对吧,那我们再建一个,比如说详情页面,详情det吧,就这个,那还有比如说像个人中心的页面,个人中心页面呢,你可以叫user,当然个人中心一般的我们都叫什么,都叫做比如prole,对吧,都去叫这个的,那比如说还有购物车的,那我们这里边就可以新建一个购物车的,嗯,那购物车我们就C,嗯,购物车商品看吧,要这个当你叫什么名字都无所谓了,只要你划分名字有意义,一看名字就知道什么页面。就可以了。然后这里边我们在在这里边建单独的组件页面,然后里边再建子组件目录,那么去划分就行了,比如说后面下边如果我们再需要子组件的话,后下面需要子组件,那我们就可以新建一个,在这里边新建一个,比如说子组件cops,那在这个后下边,这下边声命的组件只给home这个页面去使用,不给其他的页面去使用,只给home页面去使用啊,那这里边儿比如说建一个。
14:24
呃,模板后的模板ho。啊,评价在这里边用到的组件,子组件在这里边,如果是多个页面公用的,咱们放到哪啊放到这几个里边,因为咱们用VE。最主要的或者是用到的就是大量的一些组件,所以组件划分这块大家要清楚一些就好了。嗯。其他的像在APP啊和主成序这些现在展示都没有变化,等用到的时候咱们再说这文件是作用干嘛的,讲基本语法这些都说过了,只是一个项目的一个基础,这样的一个用用结构,当然咱们在做做项目之前呢,还得做一系列的初始化,这只是目录结构的初始,初始化建议大家先了解一下,按照我的方式创建一下,那咱们还需要创建什么呢?比如说访问的别名啊,呃,网络请求的封装啊,这些咱们都得建,还有基础的一些CSS都是需要我们创建的。
15:15
这节课我们先讲到这里,先把我们的创项目先创建一下。
我来说两句