02. 尚硅谷_mpVue_初始化项目及项目说明.avi原创

好，我们接着上一节课继续讲，那么上一节课呢，我们主要是对map view这个框架呢，简单的给大家介绍了一下，那么这一节课呢，我们去看一下如何去初始化一个map view的项目，那么来到我们的浏览器呢，我呢提前已经给大家打开了这个map view它的一个官方文档，哎，官方文档大家也可以去访问这个地址，当然同时我也把小程序也是微信官方的一个网站呢，网页呢我也打开了。啊，来到map view的这个网页，我们来看一下，哎，上面这呢，它就有一个介绍，也是我刚刚给大家说的map view是一个使用VIVO GS开发小程序的前端框架，哎，使用VIVO GS实践案例呢，美团酒店餐饮啊，因为人家是美团推出的，所以呢这些的应用到他们的项目里面。好，我们往下再来看一下，这边有个名称由来，哎，也就是说它为什么叫map view。

Map首先我们得知道它是就是小程序的意思，那么map view连起来的意思呢，是点G，你在小程序里边使用GS，嗯，下面呢是说的它的一些特性，那么在这呢，我们就不去细说它了啊，再往下看的话，这其实就没有什么东西了，那么我们要看map view的一个官方文档说明，或者API如何去使用的话，我们得去看哪呢？大家看第二个map view，这这有个home，来我们点击一下。好。点击完home以后，它会跳转到当前的页面，诶上来这儿有个使用手册，再紧接着往下呢，这儿有一个五分钟教程，那其实这个东西倒不是太多，我们只要说大家会原生的小程序以及会view的话，那么有这些东西就差不多，哎就差不多，好，我我们直接来看五分钟教程。

那么在这儿呢，他说你得通过V有点GS命令行工具v c Li，哎，去干嘛呢，去构建。功能的小程序项目，V有c Li，这个东西我们并不陌生，那并不陌生是V有脚手架的一个命令行接口，那我相信大家的电脑上应该是都安装了这个VUCL啊，因为你如果不安装的话，那么在V5的学习当中也是没有办法去使用的好。那如果说没安装的同学呢，你需要全局去安装一下这个。V u c Li装完了以后，哎，你会发现在你全局多了个命令，就是view view，哎，大家还记不记得我们使用vvo脚手架初始化一个项目，怎么初始化？

VO也是in it对吧，只不过后边我们跟一个叫什么是web pack的东西，对吧？然后后边再跟一个项目的名称，而使用map view的话，我们得去执行这一行命令，看看大家能不能看懂view in it，这是初始化的意思，后边初始化的项目，那这呢？这是固定的是map view的项目，哎，这个quick呢，是快速启动的一个项目，那这我们就不需要去动它，因为这它有一个事例我们可以能看到，那后边这个呢，就是你自己起的一个项目的名称，这个起什么无所谓，起什么无所谓，但是要注意。你这个肯定我们不能起中文，这是最基本的一个常识吧，好，那看到这儿以后呢，我呢打开命令行，好，现在注意我要初始化一个项目，或者说我不在这儿打开来到我的桌面，我呢在这儿去新创建一个文件夹，我叫他map view，来来个下划线，Test。

那当前的文件呢，作为我们马上要写项目的一个根目录，哎，根目录好来到这个文件里边，我在这儿去Ccmd好，进来以后为什么要在这CMD的原因是我要找对路径，那进来以后呢，我们需要去只启动哎这个命令。好，那后边这这个项目名字呢，我们去换一下吧，我们叫它map，比如说回车。当你跳完回车以后呢，你会发现他去下载一些模板，那其实在这儿呢，他也写的一清二楚好，那到这一步呢，他是问我项目的名字是否用我刚刚这个项目的名字呢，是否用我刚刚起这个名字好。

Yes，往下走。这呢是问是否有什么有我们的APPID，那这个我相信大家人手都有了，这个APPID呢，是小程序里边你的唯一标识，哎，有了这个标识以后，你才能拥有一些特权，那没有的同学呢，你得去官网上去注册一个账号，注册完小程序开发者的账号以后，你对应的就有一个APPID，那在这呢，我就直接往下走，描述是否构建，是否使用VS，那在这呢，我们先不去用它ES link，它呢啊，就算我yes，我待会也会把它关掉，因为有它的话还是比较烦的。那么往下走回车，回车完了以后，其实在这儿呢，也给出一些说明，首先你得CD到你的创建的项目里面，那这个时候呢，大家看一下我来到当前的文件夹，诶，你会发现这多了一个文件。

叫map view test，而这个名这个文件夹呢，正好是我们要创建这个map view项目的根目录，来点进去看，你会发现里面有很多的文件，哎，有很多的文件，这个时候呢，为了便于大家观看的话呢，我会使用web去打开该项目。稍等，我在这里呢，先启动一下web。好，Web storm启动了以后呢，我去open，然后呢，来到我们的桌面，找到我们刚刚，诶那这个呢，它是没刷出来，我再让他重开一下，在这儿，这不是咱们的项目吗？OK。

好，那现在呢，我们在这儿看一下，那这个呢，就是我们刚刚初始化的一个项目，哎，刚刚初始化的一个项目，大家看一下他让我们做什么，说CD到这个项目的根目录，那其实现在呢，我打开命令行，在websto里边，咱是不是已经就在我们当前项目的根目录了呀，那这一步是什么n PM install，哎，是不让我们去安装当前项目依赖的所有包啊。哎，这个时候问大家一段，问大家一句，他这个n PM install，它是根据哪去安装它依赖的包呢。哎，对，哎，其实这个知识点呢，给大家讲过，这是不是有一个派杰森啊。那么这个packson，它相当于是我们整个项目的一个说明文件，在这里边有个dependencies以及d dependcies在这里边的信息正好是我们要依赖的包名以及对应的版本号，那在这呢，我先去执行一下n PM install，那这个时候呢，他就会去下载我当前整个项目的依赖的包。

再往下看，他这说啥，哎，也就是说你安装完以后，你是不是就可以run DV去运行了，好，那这是在命令行看，大家可以看一下在他的官网上是不是也有对应的说明啊，也有对应的说明，好那这个时候呢，来到webw里面先让他去安装着，然后呢，我可以带大家去过一下这个项目的一些文件。首先build和config，那这两个东西呢，它和我们view脚手架里面的文件差不多，哎，差不多大部分呢，是针对pack以及整个项目的一个配置，哎，这样呢，我们就不去细看，那这个src呢是原文件，Static呢是项目下边去放的一些静态资源，那BA呢是去转换，也是BA呢是可以帮我们去转换一些语法的。

哎，再往下，这是一个设置ES ignore，那在这我先写一个东西啊，为了之后我们写的方便一点呢，我在这儿ignore大家知道是排除的意思啊，用过get那个。可视化工具的同学应该对这个比较熟悉啊，比较熟悉，我呢先让他不去检查这些文件，好，那这是ES link RC RC这个文件呢，是运行时控制文件，叫run control，这个是ES在做检查的时候要去读的一个文件，那这里边呢，写的是ES lit它的一些配置。当然了。这有个。你不想让他去检查，或者说是即使检查出来不让他报错的话，当然也可以在这去设，哎，他呢，承诺了012，哎，012 OK，那这是gate的，这是postose CSS的，那么这个呢，Index，那这就是我们的主页面，那看这儿的话，你会发现，诶，这和我们唯有那个脚手架创建出来的像一模一样，哎，一模一样，当然了还熟悉这吗？那在这儿他说的是belt的，也说构建的文件将会被自动的插入注入，因为啥你看这是不是只有一个div啊，其实当我们构建完它下边会自动是不是多了script。

标签，然后呢，引的是我们构建完了什么，构建完的GS文件，GS文件。好，那这是主页面，那再往下的话就是package杰son，那我们刚说了，那这个project杰son，哎，我们并不陌生吧，并不陌生，那这个呢，就是小程序项目的一个配置文件，哎，在这呢，要说一个东西啊，这这个AP pidp PID，我们现在是不是还没有啊啊待会我们找一下吧，待会找一下。

好，那这就是一个大概的配置，那这呢还没有下载完毕，再带大家去过一下src，我们看一下在map view里边它是怎么去开发的。因为我们要写的代码是不。就在这一块，好那。刚刚我提到一个概念，不知道有没有同学有印象，我说了它是一个工程化的项目，那么工程化里面它其实包含了什么？包含了模块化。一说到模块化，我们立马得想到一个东西。叫。入口文件对很好，好入口文件模块化是去。

把所有的模块最终是不是要汇集到主模块，哎，汇集到主模块也是汇集到一个入口文件，那我们来找找看，你说哪个应该是主文件。哪个是入口文件，哎，不用说是不是应该是这个命点GS，哎命点GS好那。命点GS里边，我们看看这是干嘛，首先引入VU，引入a bapp，不用说是不是这个哎。的一个组件，那再往下这一步，哎，这一步是干嘛的呢？View有点conflict.production tip，哎这个呢是配置，我们不用脚手架里边它会有一些提示，哎有一些提示生产的tip不是小提示的意思吗？当设置为false，意思就是把提示关掉，哎把提示关掉，那在这儿的话。再往下看，这一步是干嘛的？app.map type map其实指的是map view啊，小程序type是不是类型啊，后边又跟着APP，那这个APP其实指的是我们整个应用。

稍后呢，我会给大家写详细的一些注释啊，在这儿我先过一下，那这一步呢，是要声明当前这个APP代表的是整个应用，而不是一个单纯的组件啊，为什么要这样做呢？因为他还要和后边页面里面这些组件要区分开，他们呢就是一个单纯的组件。OK，那再往下看这一步。哎，这不用说new view是不是生成一个实例啊，只不过现在是不是生成APP的实例，哎，之前可能大家比较熟的是不这个new用一个view，然后在这里面去写啊，在这呢，可能有个什么EL，然后井号APP，那再往下呢，可能有个render，这应该是有个H对吧？然后呢，这是个H调用里边放的什么，放这个APP，但是我要强调一下。

但是在我们这个map view里边不能这样写，你还必须得这样去写，先去生成一个实例，再用实例去调用Dollar Mo，这一步呢，相当于是去挂载整个应用，使它生效。哎，那这个呢，是我们的入口文件，那看一下这个app.view我们说了这入口文件它是挂载整个应用的，对吧？那回想一下我们原生的小程序里面整个应用要生效，我们怎么做的。大家还记不记得在我们原生小程序里边上来，外边有个叫app.gs哎，那在这个里边上来是不是有个APP括号调用了，其实我当初呢，给大家说过这个APP调用相当于是不是注册整个小程序应用的，哎，那其实刚刚这儿的操作呢，就类似于这一步。

那这个app.view这个组件，这我给大家收起来，你会发现有两部分。哎，有两部分有没有发现，首先我们能发现什么缺点什么。哎，对，最简单嘛，一个组件它是不有三部分结构样式行为啊，那么在这很明显没有什么，没有template也是没有结构，哎，因为这个view APP的view它是整个应用，所以在这儿不需要去写任何的页面啊，不需要写任何的页面，那么这个script呢，里面的内容就相当于是我们原生小程序里边APP调用里边写的内容。

可以写什么呢？可以写当前整个应用的生命周期，以及全局的那些数据，啊，在这呢，我们能看到created。那这个时候问一下大家，这个create是我们原先小程序的生命周期函数，还是我们view的组件里面的生命周期函数啊。啊，这很明显是唯有组件的生命周期函数对吧，但是呢，你会发现这个东西是不在我们小程序的项目里边啊，在这呢，我先给大家提一点啊，提先提一点，也就是说在map view里边，它既支持view组件的生命周期，又支持。那又支持什么呢？又支持原生小程序的生命周期，那个稍后呢，我们会详细的去讲，先明确一个道理，记住了这个app.view它的作用等于我们原来原生小程序的APP点减S，那当然了，这个style等同于我们原生小程序的什么APP点微信SS，相当于是全局公共的什么样式。

哎，没有问题，当然我们之前是不是还有个APP杰森，也就全局的配置文家，哎，那这个东西呢，在这儿呢，肯定是搞不定了，所以呢，它在外边是不是单独的又有个APP点接送啊，其实呢，我打开这个文件呢，大家并不陌生，那这个呢，是配置我们小程序页面的路径，这个是窗口的一些表现，对吧？好，没有问题，那咱们继续往下看。那再往下呢，这有个page，那pages里面呢，那不用说是两个页面，哎，看到这两个文件夹，我们也比较熟悉原生小程序，当时我们上来看那个它那个模板项目的时候，是不是也是这两个文件啊，只只不过里边的内容不一样，哎来那讲这个之前呢，我们先去回顾一下原生小程序我说过四个重要的文件是什么。

微信mail对吧，结构微信SS哎，注意前面是不是都有个点，这是后缀嘛，这是样式还有什么。点GS，还有个点杰森。这没问题对吧？点JS文件好，那结构样式行为配置配置文件好，那这是原生小程序了，哎，你看到我们在my view里面有这四个文件吗？是不是以最多我们能看到有个后缀是点GS的文件对吧，那我们来看一下它这两个文件怎么就能取代我们原生小程序里边的，哎，这些文件呢。在这再看一个东西，m.GS刚刚我们是不是看到过一个，哎，再看这个，你会发现还和刚刚这个是不是有点。

有点像呀，首先引入V用引入APP，这个APP其实指的是什么？是这个组件了吧，因为大家看这个路径，然后呢，又生成一个实例，哎，又在这儿去挂载一个页面，那么在这儿呢，我要说的是刚刚这儿挂载的是整个应用，而在当前这这个文件的作用是挂载当前的页面，让当前的页面生效啊，那这个呢，是挂在当前的页面。好，那这个文件我还和大家说，你在map view里面写任何的组件页面的时候，你还必须都得写它，不写它的话，也说不写这些操作的话，你这个组件白搭，哎，白搭没没有任何用，它不会生效的。要记住这是第一点，咱们要注意了，好，那知道了这个以后，我们看一下让我们生效的这个组件里边都有什么，我给大家先收起来。

这不是我们熟悉的东西吗？结构行为样式，哎，那看到这你能想到什么？也就这三个东西，是不是就能代表一个页面？哎，那这个时候我们应该能想得到，我们这个怎么就能取代他之前说的那些文件，那结构对应的是不是正好是以前的微信什么mail。样式呢，微信SS，而GS其实我们是应是不是应该是这个文件，而不是这个命GS，注意啊，不是命GS，命GS相当于是这个页面的入口文件，而我们当前页面的逻辑是不是在这个script标签里面写。哎，也就这三个能取代他之前的那三者，很少一个是什么呢？很少一个是吧，配置文件，哎这没有是因为它没有用到，稍后我们用的话呢，我们哎会去写它，哎我们会去写它。

好，那我们看一个就够了，那上边这儿呢，这是一个组件啊，是一个事例，那这儿呢也没啥看的，我们之后呢会写我们自己的，好，那现在大家可以看一下，呃，我们这个帮呢下完了，那下完了以后，哎，我们要去执行它上面那个命令是不是叫run d啊，那执行run d的话，带大家去看一下package点。Jason。这不是这个吗。我之前也是执行的第啊，但是后来我看了一下，我发现这两个命令一模一样，那其实执行run还不如执行什么NPM啊start这不也相当于是能启动这个项目呀。好，启动之前大家再注意一个事情啊，注意一个事情。你说我们能把这个项目现在就这样直接部署到小程序的环境吗？

肯定不行。为什么呢？他都没有什么微信ma这些文件，那我小程序的环境是不是只认识这些啊。所以他肯定是想办法把我们的源文件转换为小程序可以识别的这些文件。啊，那这些文件什么时候转换呢？你看我这执行命令回车。好，这儿马上启动了。稍等一下，稍微有点慢，稍微有点慢。

嗯，这应该是我看一下，我点一下，哎，出来了，那这是我电脑比较卡，比较卡，大家看刚刚我点这一下，相当于是不是刷新了一下，那我在这一点的时候，你会发现它多了个文件夹。叫Dis，哎，那你现在要明白一个道理，他如何去构建这个最终的部署到小程序环境的文件呢？是通过我们去执行命令n PM start，或者说是run DV去构建，那我们看一下这个D里边，哎，看到了我们熟悉的文件，这是不是全局的那些文件啊，那看一下页面里边，哎，它对应的也有两个文件。哎，只不过这个时候他还还是刚刚那个点不吗。

不是了，他把对应的这个src下面的原文件来，我们对对比来看。是不是把这一堆转化为这一堆了？那这个时候呢，我们看。这三个同名，也就是说这三个设备最终被应用到哪，被应用到我们小程序的环境啊，那其实上面这个呢，它只是一个映射的文件，那这个呢，没哎这个呢，主要是给这个做辅助的啊，做辅助的包括这个命GS下面呢，也有个点map映射文件，映射文件，那其实最终生效的呢，是这三个文件。结构样式行为都有了，现在如果说我们要写一个配置文件，您肯定是写的原文件了，对吧，但是呃，大家找一个规律啊，这是我们最终的文件，你说我假如说啊，我在这儿我要使用一个配置文件，我怎么去定义，我是定义成index接送吗？

哎，很明显不是了，因为它最终转的时候是不是统一转成命呢，所以呢，我们定义的时候呢，也要这样去写啊，也要这样去写，这个也是我们需要注意的一个地方，好，那这启动了也是打包成功以后，我们要看效果的话，在哪看呢？那这个时候你在这儿。肯定是看不到了，你得去小程序的环境，也就是说我把小程序的开发工具打开以后，在这里边去看。OK，我去选择一下小程序的项目，然后呢，来到我们的。桌面找到这个test，再找到我们刚刚的项目，那这个项目名称呢，我们就叫它map view，然后我们来一个test，那这个ID这一块呢，我们先先不填啊，先不填好，他说我不合法，那我就不输确认。

嗯，他说是要一个ID，那算了吧，我们把我们之前原生小程序的那个ID呢，我给他拿过来，来我去找一下，首先在我的E盘下边，那来到这，我们之前小程序相关资料，我这是不是有个ID，那这个我把它取到以后呢，把这个关掉，把这个ID填进来。OK，这里。好，现在呢，我们利用这个小程序开发工具呢，已经启动了我们的项目，哎，大家可以看一下，这就是他给我们提供的一个模板项目，哎，提供的一个模板项目没有任何问题，呃，然后我在这儿再说一个事情啊。如果说有同学用的说我用的这个小程序的开发工具比里，我不想用web，我就想在这写，但你会发现一个问题啊，在这小程序的开发工具里边，它是识别不了这种。

第二唯有后缀的文件，所以呢，我迁才迁移到了这儿啊，这也是我们要去了解的一个啊事情好，那现在呢，我们看完了这些初始化的项目呢，那我们就先停一下，然后呢，我们去编写自己的项目，好，本节课呢就讲到这儿。