00:00
哈喽,各位小伙伴们大家好,那接下来啊,咱们呢,去开发咱们的商品会电商平台。现在桌面上呢,咱们呢,先新建一个文件夹,用于存储咱们的项目。咱们呢,给它起个名字,比如说叫做project商品会。那老师呢,需要准备一个笔记,把每一天重要的知识点啊,咱们呢去记录一下。比如说叫做第1.md。那咱们今天所要做的第一件事是什么呢?就是咱们要采用VE-c Li脚手架去初始化。咱们的效。那这里呢,需要注意一下,第一个你的电脑当中需要安装node平台。有人说需要有no。第二件事儿呢,就是需要安装一下子web pack。
01:01
当然最好呢,是需要有淘宝的,哎,淘宝的镜像。因为淘宝镜像呢,在下一些依赖的时候呢,会快一些。对吧,所以说如果要写项目,那这些环境你得有。那咱们呢,去利用一下咱们的脚手架,去初始化咱们的项目。那么进入到这个文项目的文件夹当中,在这里呢,咱们的输入一个CMD,打开咱们的命令行。那这里呢,需要输入的是VE空格,可加上你项目的名称,比如说咱们叫做APP。那去初始化咱们的项,当然在初始化项目的时候,它有一些选项。比如说第一个叫做default,是默认的选项。这里面呢,会给咱们安装上V2版本的。以及背和ES的校验工具。
02:02
当然,咱们所开发的是属于Ve2.0版本的。那么底下这里呢,还有个叫做default,叫做V3,那这里要注意,咱们采用的是V框架的二版本,并非三版本。那以及底下这里呢,还有一个是自己去选择一些依赖自己去手动的去安装。那所以说咱们呢,采用的是第一个去让他去进行安装,但是安装呢,是需要一定时间的。也是需要从gate上把人家的这个脚手架默认的项目给拉下来。所以说呢,这块呢,一定要注意前提一定要保证你要有网络。而且刚刚老师也说了,你的电脑当中需要安装上node webpad以及淘宝的镜像CNPM。所以说这些呢,一定一定要注意,如果网络不好的同学稍微等一下。
03:03
那咱们呢,咱们的项目呢,已经下下来了,咱们呢,给他拖拽到咱们的Vs code当中,咱们去看一下它的一个目录。那这里面呢,咱们也去稍微聊聊VC Li脚手架下下来的这个项目的一个目录组成,咱们呢,先稍微认知一下。那首先说no MOS文件夹,那这个我相信很多同学都应该熟悉,它里面放的是咱们项目依赖的东西。所以说这里面呢,咱们得做一下笔记,就是no的杠。Models文件夹。那它里面放置的是什么呢?放置的是咱们的项目的依赖。那咱们呢,可以打开稍微看一下子,比如说。对吧,BA翻译官他呢,可以把一些比如说把一些ES6的语法呀,翻译成S5啊,让它兼容更好一些啊,以及像VE框架。
04:10
对吧,这些依赖都在这里。所以说要注意一件事,什么事,Not modules,它所放的是咱们的项目依赖的文件夹。那除此之外呢,还有一个叫做public文件夹,那这里面呢,咱们也写一下的,叫做pub public。对吧,文件夹。那这个文件夹里面呢,咱们也看到了,它放了一个静态页面,那咱们应该知道view或者是react一般用于开发单页面应用,那单页面单页面你是不是得有一个静态页面。对吧,以及这块呢,还有一个小小的一个图标。但这里面要注意一件事,就是public文件夹里面一般放置什么呢?哎,一般。
05:00
放置一些静态资源对吧,就比如说是图片。但是这里面呢,需要注意一件事儿啊,需要注意。就是放在public pub l放在public文件夹中的静态资源啊,静态资源咱们挖派进行打包的时候,打包的时候会原封不动,原封。不动的打包到哪儿啊,打包到Dis的文件夹中。那也就是说,你放在public文件夹里面的这些静态资源,Web pack在进行打包的时候会原封不动的扔到Dis的文件夹当中,而不会当做一个模块打包到JS文件里面。那以及啊这块呢,还有一个叫做src文件夹。那src文件夹咱们都应该知道,这是属于程序员,哎,源代码文件夹。
06:06
那这个文件夹呢,当然相对而言呢,是很重要的,咱们将来所要开发的这些,呃,组件呢,代码都是在这里。那在src文件夹下,哎,又有一些文件夹以及文件,那咱们这里面呢,也说道说道。那首先说在src文件夹下有一个叫做size文件夹。对吧,那咱们写一下子叫做ass文件夹。那这个呢,要注意a size文件夹一般呢,哎,也是放置的是静态资源。而且呢,一般的放置的是什么呢?哎,一般放置的是多个组件共用的静态资源。就比如说你写了100个组件,其中啊有50个,甚至是80个组件都共用了同一张图片,那你就可以把这些共用的图片扔到access文件夹里面。
07:09
但是这里面呢,需要注意,哎,需要注意。那么放置在a size文件夹里面的静态资源。在web pack打包的时候啊,爱鞋架打包的时候要注意,那么web pack呢,会把静态资源,哎,静态资源。当做什么呢?哎,当做一个模块,打包到哪呢?打包到JS文件里面。所以说呢,As和public都是放静态资源的地方,但是要注意它两者还是有区别的。那以及这里呢,还有一个叫做complements文件夹,Comts。
08:00
这个单词呢,本身的意思啊,就是组件的意思,那这个文件夹呢,咱们呢,一般放置的是非路由组件。那么在基础的课程当中,咱们应该知道complements一般放置的是非路由组件,或者是一些什么呢?或者是一些哎,常用的全局组件都放到a set啊,放到complements文件夹里面。对吧,所以说这块呢,要注意一下。那以及在src文件夹下还有个叫做app.view。啊,那这个要注意,它们是咱整个项目当中唯一的根组件。那咱们呢,可以点去看一下。对于voe的一个组件,要注意它分为三部分,哪三部分了,Template。这块是书写结构的地方,就是写HTML的地方,那思科rip呢,是JS的地方,以及style呢,是属于什么,是不是书写咱们的这个样式的地方。
09:08
所以说这块呢,要注意一件事,app.view是咱整个项目唯一的跟组件,而且要注意vuee当中的组件啊当中的组件,哎,都是什么文件呢?点view文件。那如果说你有一定的基础,应该知道react组件一般叫做GS叉。对吧,这个要注意一下,而且对于咱们前端人,你应该知道前端分为三层。结构层。样式层行为层,所以说这是咱们程序当中唯一的一个根组件,那这里面呢,咱们呢,可以快速的给它生成一下,对吧,当然老师呢,已经安装好了代码片段了,如果你没有安装,可以自己安装一下。那这块呢,咱们写上一句话,就是我是跟组建。
10:01
对吧,那以及这里呢,是什么呢?命点GS文件,这个呢,是属于咱程序的入口文件,哎,命点GS它呢是属于程序的入口文件。啊,也是啊,整个程序当中啊,最先执行的文件。对吧,那咱们这里的代码呢,你们应该很熟悉对吧,比如说引入view,引入跟组件对吧,当然这个提示咱们就不要了啊,可要可不要,那以及底下这里呢,是把咱们的跟组件挂载到咱们的挂载点上,就是谁呢?就是这儿,这不有个叫做APP吗。对吧,当然这个noscript这块呢,没什么用,你可以给他干掉简化一下。对吧,所以说命点GS是咱程序的入口文件。那这里呢,老师呢,把右侧的这里啊都给它,呃,关掉这些咱都给它关掉。
11:00
那以及这块呢,还有个叫做点getate啊,这个呢是什么?是get的一个忽略文件,这个文件呢,咱们呢就很少碰了啊,因为有的时候写项目是要上传于get上,对吧,而且工作当中他也经常对于get呢,经常有各种各样的玩耍,对吧,比如说创建分支啊,解决冲突啊对吧?那当然这个文件呢,就是跟get相关的get的忽略文件,这个呢,咱们一般是不碰的。那底下这里呢,还有个叫做背点啊坑啊背点con.js文件,咱们写一下叫做背杠啊啊点横fa.GS文件。那这个文件呢,也是一个配置文件,配置文件与谁相关呢?与BA相关,其实babo在有webpa机主的时候呢,应该知道听过这个BA。BA呢,你可以把它理解为是一个翻译官,对吧,他能做哪些事儿呢?咱举个例子,比如说可以把ES6的语法翻译成ES5的语法,对吧,让兼容更好一些,而这个呢,也是属于一个配置文件,这个配置文件呢,咱们呢一般呢也不会去碰。
12:15
那以及底下这呢,咱们再看一下子,还有一个叫做package点杰森文件,这个老师呢,也给他写一下子叫做PA package点杰森文件,哎,杰森文件。那首先说package点儿杰森文件呢?其实这个玩意儿你应该熟悉。他就像每个人的身份证是一样,记录着你这个项目信息。比如说你这个项目叫什么版本是多少,怎么去运行,对吧,以及你项目当中有哪些依赖,在这里都进行了记录。所以说package点儿杰森文件呢,你可以认为是什么呢?哎,认为。写一下哎,认为是你的这样的一个项目的一个身份证啊身份证。
13:03
什么叫身份证呢?就是记录了你的一些信息,比如说记录啊,你的项目叫做什么啊,项目当中,项目当中有哪些依赖,那这个package杰森文件呢,都给你记录住。以及还有什么呢?比如说你项目怎么运行,哎,项目怎么运行,人家这里面都有说明,比如说看这你要运行项目得怎么的n PM run。那以及还有一个是缓存性的一个文件叫package lock点杰森。那这个呢,老师也写一下呢,就是PA package-lock.js文件,其实这个文件呢,你可以删除,当然呢,咱们就不删除了。它是一个什么呢?是一个缓存性的一个文件,缓存性的一个文件,你曾经的那些依赖从哪下来啊,就是从getate上哪块诶来的,他都给你记录住了,而且你会发现你项目当中的一些依赖,第一次下它比较慢,但是第二次的时候搜快,为什么?就是因为这个缓存性的文件。
14:12
那以及底下呢,还有个叫read me.MD文件,那这个呢,是整个项目的一个说明文件写下的这个re ad me啊,Read me。点MD文件,那这个呢,就是一个说明性的文件,哎,说明性的一个文件,咱们可以点进去看一下的,比如说你n PM install要安装依赖啊,项目怎么运行啊,怎么打包啊,人家这里面都有说明。所以说呢,这是对于VC脚手架当下来的这个项目的一个目录和文件的认知。这里呢,如果说小伙伴们没有VE的基础老师呢,建议把前面的vuee基础的课程呢,稍微看一下。
我来说两句