19_尚硅谷_Vue_基于脚手架编写项目

啊。那我们就接着上午的说啊。上午呢，我们已经用脚手架创建了一个项目啊，本来是这个，但现在呢，这个没有下载依赖是吧，假设我就把这个给它删了吧，这个删了。上面以后呢，这个已经下好了，但是这个名字不太好，我们改一下名字是吧，可以改一下名字。嗯，就叫DEMO好改它以后呢，最好把那个。这个改一改。这个是吧，这个名字叫这个就不太好了。OK，其他都不用弄了，好了，我们现在呢，用we把这个打开。

啊。来我们整体看一下它的结构啊，啊，首先呢，这前面有两个文件夹，一个叫build，一个叫看，其实都是配置文件夹。啊，这里面有很多配置啊，这配置呢，现在不用每一个都去看啊，我说几个我们后面会用到的。呃，一个呢，是这个，呃，这个里面这是外派D相关的配置，这个大家应该能大概知道，这是外派D相关的配置文件，而且这里面有贝斯DVPD这个，这个应该说是什么，这是给开环境使用的，而这一个呢。Product，它是生产环境这个单词的一个缩写啊，一个缩写。好在这个里面我们可能有一个这个前面先暂时可以不管吧，能不管的先不管啊，我们看一下这个这。

这里有几个东西，首先有一个东西是什么呢？等口号。这个端口号呢，嗯，他不会还记得RA项目，它有个有个比较好的地方，就是如果单口号被占用了，它会怎么样，是不是自动提升一个。是不是数值啊，而他不会，那也就是说如果我有两个比的项目要运行怎么办？是把其中一个改一下呀。好，还有一个地方。是否自动打开浏览器，这个写的。那就是我们希望自动打开怎么办啊，先暂时只要知道这个就行啊，别的到时候需要的时候我们再说啊。这是所有关相关的一些配置。在这个。往下看，这是这个不用说依赖是吧，这个是我们的什么。

是不是源码的目录啊，我们会写一些代码，就写主要写在这个里面。好，所。啊，叫static静态的，它会放一些什么呢？全局的资源啊，全局的一些样式啊，或者是图片都可以放到这个static里面，而在哪引用呢？可以在页面里面进行引用，诶页面放外面了，它跟我们脚趾架不太一样啊，诶这里面有个特别有意思的一个文件啊，看啥也没有。能看到吧，叫点get keep keep什么意思？保持。这个文件专门给get进行服务的，G有一个特点，如果你这个文件夹里面什么都没有。那我会自动将你忽略。Get就会自动忽略，但是呢，他又不希望这个文件夹被忽略，怎么办呢？它有一个语法，就是你在这个文件夹下面创建这样一个名字的文件，里面什么也不用写好了，那它就会将这一个文件夹以及这个文件。

都版本控制起来。啊，就这样，大概这样一个意思，大家看懂。好，其他的这个。这个大家应该是能大概知道，以前我们用过一个Bible，对吧，Bible用来干嘛的。它有两个功能，ES6转ES5，再一个是GSX转什么GS，那现在我们主要还是用ES6转什么ES，因为我们现在不用GSX语法对吧？啊大家知道主体这是它的一个配置好。这后面有一个有一个变成叫RC。啊，RC是个什么意思呢？啊，大家要留一个了解啊，叫runtime。Counter。

什么time什么意思？运行时控制叫运行时控制，说白了就是来描述我们的Bible是怎么运行的，说白了简单来说就是Bible的一个什么配置文件啊，一个配置文件。啊，这个里面呢，基本上也不用改啊，需要改的时候再说。这个不用管它这。好，下面两个这个应该能知道啊，ES的RC。是不是E的配置对吧，好，这个里面到时候我们会改啊，到时候再说啊，先大概有个了解，不用背啊这个。ES ignore ignore什么意思？忽略诶这个文件用。啊，我们ES特会默认会对一些文件进行检查，可能呢，你希望它忽略哪些文件，你就在这里配置一下啊，从这里能看得出来哪些文件或者文件夹下面的文件不忽略呢，会不会不检查了？

对吧，Build下面所有的对不对啊，Build下面的，以及什么config下面的，以及后面要生成的Dis，以及我们这个根目录下面什么。JS。嗯，比如说这个是不是GS啊，它就不会检查。啊，后面需要的时候再跟大家去说啊，大概有一个了解。这个这个。是不是get的忽略配置，这个应该是能懂的对吧？OK，这不填idea吗？这不，我们的load干什么，Models？啊，这个不用管它，这个是我们的什么呢？我们最终的页面这个应用都是个单页应用是吧，总要有一个。是不是主页呀，这个主页其实非常简单，就一个。就一个div啊，而且还是空的。啊，还是空的好，这个是什么？

当前我这个应用的是个描述文件。这个应该是能看懂的。这里面有生明一些运行时依赖和开发时的依赖。好，这个是它的每一个应用都有一个自身的一个整体的一个描述文件啊行，那现在呢，我们去把当前这个项目呢，给它运行起来。我可以直接在里面运行NPM是DV或者是大闪，是不是也可以。啊，也是可以的。好，把其他的都先关了啊，其他都先关了。好，我们可以简单的去看一下整个应用它的一个，呃，那个组件的结构，我们说过有一个这个标签说明什么。

溜了一个view的实例，还记得吧？呃，跟标签叫什么名字，Pap下面有个什么Hollywood。能看到吧，好。那我们就整体的快速的看一下，我们去自己写一下，这是他所需要显示的一个是logo图片呢，啊这个没问题，接着是看一下路口。啊，记住啊，这个look文件还记得react下面的文件叫什么名字？Index它叫什么呢？Me？这个入口文件啊，是我们外pad里面一个概念吧，啊，其实在这个地方有配置。我们来去看一下。看到了吗？SC下面的什么点，也就是说我能随便改成一代什么。不能他是不是已经配置好了啊，这个要知道一下啊。

好。来看一下。他上来做哪些事情？引入了什么view？好，接着。啊，接着六了一个什么六的实例，好，指定的E是井号AP，好了，现在有问题。这个井号AP为什么要写井号AP，不写井号test呢？看什么呢，对不对，看这。看这个能看到吧，这个里面所有写的JS最终会打包生成一个文件，大家看一下我们当前是已经运行了吧，来看一下我们的这个。看到这个。这个文件看到了吗？这个文件是我们写的所有的GS打包生成的一个GS文件。

那也就是说我们在这里面是不是六了一个view。对不对，用了一个U，那此时我的那个E要写什么。是不是APP能懂吧，这个应该能懂啊。好，那下面接着他做了一件事情，这个还没学过，这个是干嘛呢？首先我们前面说过，这是一个这个啊，这个这种它还它还不识别啊，我们点过去。来看一下，我们说一个view文件，是不是就是view的组件？组件怎么用呢？组件啊，在RA里面，组件是不是直接可以写成标签了。就是我引入一个组件，标签是不是确定了，或者标签名就确定了，对不对，但它不一样，它不是。它得引入组件，通过这样一个配置，将组件映射成指定名称的一个标签，我这么写相当于这么写吧。

对不对，这个引用的是我的组件嘛，将组件映射的名字叫什么。叫这个名字吧。答案，我可以简写啊。对不对，那也就是说我现在的组件标签名是不是大写的APP好接着。写了一个概念，叫template，什么意思，模板？啊，它是这个模板本质上就是一些标签字符串吧，啊，最终这个模板会插入到哪个里面去了。就是插到E所匹配的那个页面上的是不是这个div。能懂吧，啊OK。那也就是说此时我们最终渲染的跟标签跟组件是不是就是APP啊。没吧，啊，OK。好，下面呢，有一个。

看这里啊，大概其实应该大家可以看懂啊，大家不要太那个。无非一个组件，我们说一个组件是个什么东西。组件是什么？主见？你跟人解释什么叫主见？什么叫主见？干嘛你都你都能写就不能说了呀。啥叫组建呢？大家写react主件，它跟你用RA还是用view没有关系啊，OK，是没有任何关系的。那组件的想法是怎么产生的呀？对吧，我们这那时候去组建画编码，但是要做一个什么事啊。难道回答主见是什么都回答不上来吗？说说啊。

周德镇。你说一下你的理解主见是什么？嗯，你那你刚刚你回想一下，你刚才说的，你不是落脚点又在组建了吗。你只是前面前面说的描述语其实没有太差啊，就已经还可以了，只是说你不能落脚到你说了很多，最后又落脚到组件上面，本来让你解释组件，那你的描述里面肯定不能出现组件这两个字。对吧。一个JS文件，那也就是说我一个组件就是个JS文件，那我这个就不是组件，那我这不是个JS文件了，你看我后面的这些，我们说一个V文件就是个view的组件。好，你你要这么说的话，譬如说举个例子，我们里面写个组件吧。那它还是个GSX的好，那即使这样，那那我的组件里面包不包含图片呢。

啊。我不包括呀，我的天把它打开，这个不理解，这是很操蛋的事啊，大家在想啊，我我我们说这个文件夹是个主件。对不对，这是我们定义的一个组件，这个组件里面有什么东西，大家看一下我们这个logo p说这就是个组件，我们这是我们写的一个组件，难道是一个组件就是一个GS吗？那叫一个模块。对吧，那什么是组件呢。大家回想一下我们这个logo这个东西怎么设计出来的，我们当时有一个注册，有一个登录的界面。对不对，我们发现，诶这个界两个界面里面有两个类似的效果，一样的效果，那我们就抽取了一个组件出来了。是不是？那组件到底是什么呢？

大家也写过，大家前面是不是用react写过，最先做练习的时候，是不是写过评论的一个管理的一个界面，对吧？啊，你一上来是不是做一个概念叫拆分组件。是吧，那拆分组员是干嘛是吧，我的界面是分成好几个部分。是不是？哎，你说这边区域是不是一个组件，这个区域是不是个组件。那它到底是什么呢？其实它就是一个局部功能界面。啊，一个局部的功能界面啊，这个局部功能界面里面相关的所有资源都是组建的一个组成的部分。啊或者说啊，简单可以认为就是一个功能模块。一个界面的功能局部模块啊，我们平常说的模块是不是JS模块啊，啊就是一个局部的功能，大家要知道一个功能，一个界面功能是不是页面上要素嘛。

是吧，H天CS还是什么GS？我们在react里面，大家看到这个，其实这个里面。这个里面就包含了两个东西了，GS和和HTM。大家知道我们的GGX里面怎么来的呀？这不GS加XL吗？是吧，这个参呢，实际上是不是就是一些H天外标签和一些自定义的标签。我把它可以看成是H吧，可不可以？可不可以啊，干嘛呢？这那就不能接受，这不写标签吗？这不写GS吗？对吧，那同时我这里面是不是还有样式啊。为什么我有这这需要这些东西，很简单，这是页面上要素。

对不对，即使你是一个局部的界面，你是一个局部的部分，那也是需要这三个部分的，对不对。嗯，OK，那当然有可能，我还包含什么。图片，这就是一个非常典型的比较完整的一个啊，包含资源类型比较多的一个组件。也就是说我们的一个组件，首先得说是我们的一个局部功能界面啊，这里面加的是加概念功能界面，它包含了所有。要实现这个功能界面所有的相关的资源。那你就下面举例，哪些资源呢？HTMLCSSJS也有可能有。需要什么的，看实际情况。就我实现这个功能界面需要哪些资源，那这些资源就是我当前这个组件的一个组成部分。

你学了这么久，如果这一点都没办法跟人交流，其实是相当于你不能说白学了，但至少说跟人交流的时候，别人感觉你不懂。啊，看。这时候就你就很被动了，你不仅要会写，你还能说。那没办法，大家都要需要面试，都要需要找工作。这里面啊，这里面实际上为什么有这么三个标签，其实你只要理解了组件。它的意义，那你就知道这三个标签是必然的结果。而且这种设计非常好。啊，他会让你写的时候不像我们刚才那种，是不是样式还是写在外面了费劲。啊，而且它那个GS和HTM是融合在一起的，而现在呢，是分开写的。上面写模板也写HTM对吧？啊，下面是不是主要是写些GS啊，当然它的HTM呢，可能会套一些什么GS的小代码是吧？什么表达式，什么指令对不对啊，那个不算特别多，你看基本上也能看得懂。

这个首先要理解这种写法啊，它的必然性。好。这是这个，那后面呢，我们就需要去来去写一下啊。不管那么多，先给他干掉。把图片还是留着，因为图片都会有用。那干了以后呢，现在我们要去写，那现在肯定是没效果了。是吧，没任何效果了，现在它缺一个什么呢？缺个man.GS那我要干嘛去创建一个man.GS创建呗。对吧，好在这里面呢，我们一个应用一般都会有一个。

根主键啊，根主键，这个根主键呢，我们一般会取一个名字，应用根主键我们会取一个。来看啊叫APP。点什么呢？这里面实际上是没有太大的一个大小写的区别的，你可以写大写，也可以写小写。嗯，OK，这里面呢，我是有一个习惯，就是view的组件都是以大写字母开头啊。啊，里面写什么，关键里面写什么。三个标签先把结构写出来，不要先写里面具体的先写结构啊，Temp哪一个是吧，OK，好，这个地方有个事情啊，模板必须要有一个跟标签，其实这个大家能理解在里面就这样。必须要有跟标签这个能不能懂啊，OK好，这个估计又是什么，是不是又又什么整的事啊，看一下啊。

嗯，现在是的对吧，不管大家看是不是我们没写完整，先写一写啊好，还有什么。Script。对吧，还有什么style样式是吧。能看到吧，没有问题啊。好来啊，我们的跟标签呢，一般会放在放在src的根目录下面。啊，我们这里面最终是不是还有一个其他的一些组件了，其他的组件一般都放哪呢？啊，放在一个单独的文件夹下来，这个能懂跟以前一样的。能理解吧，好，我在这里面呢，来去创建一个啊。语文件，那创建一个文件，它的结构是不是总是跟这个差不多呀。那其实我们可以去建一个什么，建一个模板的啊，不过我这次我先不建啊，我先用一下，等会再建。

我叫一个hello word，嗯，就点。可以吧，不是一个文件吗？没问题是吧，好来，下面我在里面写点东西，这里面要说一个是它这个里面的写法是一个固定的，相对固定的写法，怎么写的，向外默认暴露一个配置对象。OK。向外默认暴露一个配置对象。我们来看一下这个地方什么问题，看到提示是谁在检查呢啊ES Li啊ES Li，那这个地方说个事啊，大家也可能会这样。搜索一下ES lit，不要让它自动检查，把这个unable。给它去掉，记住啊，你们也会啊，下次你们要自己做一下应用一下，它除了这个工具还有别的检查工具叫GS lit。

啊，这个已经去掉了吧，还有一个，嗯，一共三个。哎，这个也去掉了just paint啊，记住啊，大家等会你不用记啊，他会他会告诉你的，他会告诉我有什么问题懂不懂啊OK。来。嗯，可能他还没有识别吧。是吧？好了吧，嗯，这个结构永远基本上是固定的这样一个结构，那也就是说这个结构才是我们view文件的模板。能不懂，也就是说我现在可以去啊，创建一个模板文件。模文件在哪创建的，大家看到吗？叫a fair and code table，就是文件代码模板，我们不创建过什么HTM文件嘛，H实际上来是不是有个结构啊，有个基本结构的，那我们现在要创建一个一文件啊，我本来有一个，我把它删掉啊。

把它删掉来添加一个名字呢，默认叫view，好有个后缀。后缀是它这上面写的加号，那肯定不对嘛，我们的后缀是什么？六记住千万不要加个点，能懂吧啊，他刚才没加的，你加点那肯定就不对，内容是什么，你一定要先复制好对吧，粘贴上就没问题了。好，那也就是说我现在要创建一个什么hello word啊，非常非常的轻松把它删了。右键六什么指定一个名字。哈，我走你。已经有了吧，哎，这今天怎么怎么改进这么慢呢。好，来看一下，它放在这里。

谁啊ES的它还有我刚才没点确认吧。看一下。啊，搜索一下呗，所以这个东西啊，不用太紧啊，这里面没有确认是吧，OK一下。吃饱了，嗯，OK了。大家一旦有什么红色的波浪线什么的，你放到上面看，它提示一定要能看。啊。好，来简单说一个例子，比如说我这个地方啊，有一个有一个P标签，显示一个message。那这个里面这是一个啊，这是一个配置对象，能写哪置配置选项呢？以前与谁一致呢？与view一致，与这个。以前能配什么，现在也能配什么。你说我现在配个什么？这个里面，这个东西应该在哪个里面，Date里面，但是这里面说明一些事情，我们说date可以写对象，也可以写什么函数，可以这么写吧，这么写吧。

懂不懂，但是在组件里面必须写函数，它要求的啊，没办法啊，必须写函数。我返回一个对象呗，对象里有什么？对吧，OK，我就写一个hello啊吧。可以吧啊。Hello啊hello component吧，能看懂吧，好这写了，同时呢，我可以这么做，可以给这个P标签啊，加个样式。可以吧，啊，譬如说交相式的，你可以去匹配P，那最好可以一般会指定一个是不是类名呢？啊假设呢，我就叫message吧，那我怎么做。

就点个麦手机呗。这么写法，比如说我们的那个颜色啊，随便来啊，啊那个color了，红色可以吧，再来个放size搞大一点，30PX。OK吧，OK。好，那我这个组件是不是三个部分都写好了。三个部写了啊，那下面我们在里面是不是要去使用哈，啊使用哈，来看一下我是这一个结构，我上面呢，先有一张图片。没问题吧，这个图片我这里面去引用它。相对路径，看看怎么引啊。就是你就看着这个位置关系去引就行，我现在是在这里。我引他点斜杠size下面的logo点偏对吧，这个就差不多写个logo可以吧，可以啊，那下面呢，我想去显示的是hello word的一个内容。

那也就是说我们现在要使用这个子组件吧，首先的第一步，哎，这个我们还是没想，先把这个默认结构先写好，Export defport啊default大括号是永远是固定的。先干嘛呢，引入这我们使用组件的两几步啊引入来哈啊大写啊hello，我from。点斜杠components下面的。点view是吧，好，下面我们不能直接在这里面写标签，也就是说我这么写不对。不行，它必须有第二步，这相当于是第三步，中间有一步啊，这是这相当于是第一步对吧，叫引入组件对吧？啊引入组件那下面有一步叫什么呢。

映射标签映射叫组件标签吧，说详细点怎么映射呢？它有一个配置，Components，记住了是此为什么词我可以配置多个，当然现在我只有一个是吧？写什么呢？很简单，就直接写hello word最简单的写法了。刚好同名是吧，啊，那我第三步。就是编写是不是组件标签啊。我叫使用组件标签吧，陈懂吧，这相当于我们的第三个，也就是说最终我们去使用一个组件也就这么三步，固定的，那一定要把这个步骤给大家记时来啊，这是我们的第二步。好来啊，下面同时呢，我自己是不是也可以有一些样式。

比如说。我的这个图片。啊，也来一件，那我就写一个class，呃，叫logo吧，也叫logo，那我这个地方应该有个什么。点logo给它指定下宽高啊，Y的是Y的是A，呃，比如说我们指定一个宽度200PX可以吧，好，再来一个hit也是200吧X。OK吧，OK，好。来啊，我们现在啊，支柱键写好了，根子键写了下面，我是不是要去在这里面去用上它们，那怎么用呢？这个地方最终这叫路口GS。入口GS，你要干嘛呢？很简单，创建实例。懂吧，你最终的最终都肯定要去创建一个view的实力，你要创建view的实力，先得引入行view from。

啊，记住了，千万千万，这里要注意有两个事情，一个这个小写你千万别写成大写了啊OK，这里面大家提示尽量提示，再一个左边的这个是大写，你千万别成小写了。能懂吗？是大写啊，好，那我最终要干嘛去new一个view new个view是不是要指定一个EL呀？对吧，好E是什么呢？得去看什么东西，看index里面的它。这个不懂啊，OK，就在我们这里是吧，但是这样不对，还有什么井号。没理是吧，下面我们这个地方，我最终是不是要将APP的这个组件。

渲染到这个页面里面去。那这个得有点补助。先引入。啊，引入OK引入吧，第二步将它映射成标签。Components，记住了，是词啊，千万别写差了，如果你少了写的，那肯定不对。配置它有要求，这些属性名必然是特定的名字。啊，这是干嘛，直接写个APP呗，不简写嘛，下面一步是个使用组件标签，这个使用组件标签这个时候啊，我们直接用这个叫template。啊，这个呢，其实我可以给大家看一下一个东西，看一下生命周期，那上面应该能看出一点端倪，来看一下啊，这里面我们有鱼的生命周期有一个图的。

其实在这个图里面，它就有判断的一个东西，说你有这一个选项吗。有没有有那有这一个选项，它就会去看到这一个叫什么，首先是编译这一个template的，那是不是编译那个P标签去啊，我这个里面不写了个APP标签吗。对不对，编译它最终啊，它有一个渲染函数，最终的最终这个渲染函数会将啊是不是挂载到我们的页面上去，我们不有一个页面指定的E吗。嗯，OK。也就我们平常写的时候，是不是把这个标签写在模板里面了啊，这一次我们就直接写在这个里面了。OK，这也不代表一个模板嘛，也是一个模板啊，我看一下。

能看到吧，啊，注意这这两步缺一不可啊，缺一不可。好，那整个呢就写完了，那我们现在来看一下我们当前的。是可以有样式吧，有啊，大家也能看到它的一个样式的结构啊，没有什么太大问题。这是这个啊。那基本上我们重点写的就是这样一些，我们后面呢，会有一些练习来去练习它啊。