02. 尚硅谷_Mpvue_Mpvue初始化简介

好，来，我们接着上一节课继续，那上一节课呢，我们是在我的桌面呢来创建了一个map view的项目，并通过map友的脚手架，哎，命令好工具呢，去初始化了一个项目啊，那为了节省时间呢，我已经使用我的开发者工具web打开了当前的项目。那在这呢，其实之前呢，给大家介绍过这个map view项目，它的一个架构也是它的文件，在这呢，我再提一下啊，那这个build呢，和config，那同我们用的脚手架一样，那这儿呢，是基于我们工程化的一些配置，比如说conf里面，那这这些呢，更多是针对PA的一些配置，好，那在这呢，我们重点还是去看一下什么吧，SRCSRC里面呢，那这些这个呢是它初始化的一个项目啊，在这呢，我先给大家去执行一下这个项目n PM start。启动一下。哎，其实它默认是启动这个n PM run DV在这儿呢，启动的过程中正好给大家说一下啊。

大家拿到别人的项目以后，要启动他的项目去看哪呢？来看一下这个pack，杰森在这里边有个script，对应的就是配置我们当前NPM的一些命令啊，通过它呢，可以启动我们的项目，好，那当前的项目启动了以后，哎，那这个时候呢，它不同于我们维U项目的是是什么呢？就是在当前命令行，它这是编译了，但是不会自动的帮我们打开任何的东西，诶可能有的同学想了，那我们在VIVO的项目里边，我可以让他自动的帮我去打开浏览器啊。比如说我在conflict的index GS里边，哎，我只需要配置一个什么，配置一个o open browser，哎，它就可以把它呢设为true呢，它就可以自动的打开浏览器，但是大家仔细想一下。

那我们小程序的项目最终是要运行在小程序的开发环境的，它是不能在浏览器的环境中运行的啊，所以呢，在这儿即使说把它改成处也不管用。哎，也不管用，那我们执行当前这个命令的目的是啥呢？在这儿呢，大家看一下，这多了一个地的文件，哎，这个呢，第的文件就是利用当前的命令帮我们打包编译以后的小程序项目，文件点开以后，大家看这有个文件夹叫微信，诶WX这下边呢，就是我们编译以后的小程序的项目，而我们最终要部署的其实就是当前这个项目。好，那这是第一点，那把它启动了以后呢，我们打开我们的小程序的开发工具啊，在这呢，我们去启动一下，如果说有的同学没装过这个工具，那你可以去小程序的官网上，哎，去安装一下这个工具，包括呢，上硅谷的官网也有对应工具的下载安装，大家可以去找一下。

来在这儿呢，我选择小程序的项目，因为当前的工具里边它是空档，所以呢，在这儿我们可以去点这个加号，哎，在这儿呢，他让你找一下这个项目的目录，那这个目录呢，就可以找我们当前项目这个这个目录好在这儿呢过来。来来到我们本地的map view，注意啊，我们这有两层，也就是说里边这个是么？我们项目的个目录啊，所以呢，我们需要选择的是里边这一层就OK了，在这呢，提醒一下大家，有的同学可能认为哎，我需要导入D，但是呢，不需要，注意啊，一定是导入我们项目的根目录缺引。好，在这大家看一下，我们上一节课在初始化项目的时候，我是不是没有填APPIID啊，哎，所以呢，在这呢，人家也提示你了，没有这个ID呢，部分功能受限，待会我们来看一下到底哪些功能受限，好现在呢，我们去点确定启动一下当前的项目。

那现在呢，我们来到了这个小程序的开发工具里边，首先呢，在左侧我们能看到的这个就是map view这个脚手架，为我们初始化的一个map的项目，然后呢，中间这呢是编辑区域，哎之前呢，我们也讲过，如果呢要打开调试器怎么办？在这呢啊打开调试器，那这一个呢，是他说找一张图片找不到啊这个跟我们没有关系，因为之之后呢，这些东西我们都会把它拆掉，写我们自己的内容。在这呢，大概再给大家回顾一下吧，模拟器是左侧这一块，那这呢是帮我们去模拟它在真机上的一个啊样式以及效果，那编辑器呢。

我先给它勾掉，再点一下大家看啊，编辑器对应的就是上面这个编辑区域，那这三个选项，你想用哪个就点哪个，哎，当成绿色的时候呢，那这个区域说明这个功能呢，就在使用啊好往右来看的话，在这呢这个编译，那就是说我们写完东西呢，保存了以后可以点编译，大家看它还会重新加载整个项目，诶在这呢，再往后看这两个东西。那现在呢，很明显它是灰色的，哎为什么是灰色的呢？那这两个又是干嘛的呢？哎，其实呢，预览本身就是说我点击预览，可以通过我们手机的二维码去扫描一下啊，去扫描一下。扫描了以后有什么好处呢？哎，我们可以去在真机上去访问当前的项目，那现在很明显不能点，哎，就是因为我们没有。

去输入小程序的APPID，所以呢，这个功能受限。那现在呢，我给大家验证一下啊，我之前写好的这个项目，嗯，Map豆瓣，那这个项目呢，里边呢，有对应的APPID来，我呢通过web把它呢也打开来，把这个地址输入过来，好，那在这个里边。我点个OK，然后new window，我们新开一个窗口，首先呢，我去找一下它的PID啊，在src下面APP点，哎，不应该是在这啊，在这个project cons，那这个呢，就是我们当前的PID。有同学说那我开发的时候我我去哪找呢？稍等一下啊，我待会给大家说我呢先把我的ad来project点阶，把之前系统默认给我们分配这个游客ID，我给它换掉，换掉了以后先来到开发工具，大家看这。

是不是可以点击了，哎，那这就是。有APPID的好处，那在这儿呢，给大家说一下，你们如何去找自己的APPID，那要找APPID呢，首先我们需要访问的是微信小程序的官网，在这呢，我去通过啊，我的账号呢，去登录一下这个小程序的官网，大家来到这个界面以后，往下方这儿有一个开发的选项。那来到开发的选项以后呢，来到右侧第二项叫开发设置，好点这一下开发设置，那这个呢，就是你自己的APPID，注意啊，在这呢，只能用自己的ID，有同学说我为了省事，我能不能用别人的呢？不行啊不行，它是唯一的。

好，知道了这个以后呢，来回到我们的项目，我们的项目呢，因为它有初始化的代码在这呢，我还是大概给大家过一下啊，那这个app.jason这个文件是干嘛的呢？我们可以进来看一下啊哎。学过原生小程序的同学一看就明白，这不是原生小程序里面那个全局配置文件吗？哎，没有问题啊，他们就是全局的配置文件在这呢，我们去配置什么页面的路径啊，窗口的表现啊，以及对应的table的样式啊，都是在这里，那大家再回顾一下啊，在原生的小程序里边。全局除了这个配置文件还有什么文件？哎，有同学立马想到了还有什么全局的GS文件，这个是必须的，为什么呢？因为我们知道在全局的JS文件里边，我们必须要写一个首字母大写的APP调用，对吧？它的作用是什么呢？等同于去注册当前小程序的应用，那大家看一下，在当前的这个map view的项目里边，这很明显没有，诶，那那个文件哪去了？他不在，谁来？

替代他，或者谁来充当他的角色呢？在这我们来看一下APP，这不用哎，当大家看到APP这个字样的时候，通常能想到的是它代表的是整个应用，来点击进来我们看一下，那在这里呢，我给大家收一下啊，这是一个文用文件，来你想一下我们之前的文用文件里边应该是有三个板块，结构、行为以及样式，那现在在全局这个APP的view里边很明显没有什么。没有模板结构啊，为什么没有呢？因为在这儿不需要，那当前这个app.view扮演的角色是谁呢？它呢，等同于原生小程序的abb.gs。

嗯，就是当前的script，而下面的style呢，等同于原生小程序里面的哪个文件呢？大家还记不记得啊，我们在全局里面是不是有个APP的微信SS文件好。没有问题，那接着我们往下来看。我给大家把这个script展开，那这呢，其实对应的有一个什么，这很明显是个生命周期函数，而里边的这些代码呢，就是慢这个脚手架初始化的一些代码，到时候呢，我们也会拆掉它。好，那这个呢，我们去关掉它，接着往下来看，这有个m.GS那这个不用说，这是全局的。入口文件在这儿呢。我需要强调一点是，这一行代码千万不能识别。大家看一下，呃，首先呢，引入VU，引入当前项目的APP这个组件，然后呢，这一步我们应该是不陌生，它是用来配置view，有的一些提示给它关掉。

好，再往下，那这个map.app.map t等于APP，它呢是用来声明当前的APP，这个组件代表的是整个应用，那这个APP其实指的是什么呢？哎，是这个Apple location就是应用的意思啊，它是它的缩写，这一步千万不能丢了啊，那紧接着往下我们再来看好，那这一步是干嘛呢？去生成当前组件的实例，然后呢，去调用Dollar mount，那这个呢，去相当于是去挂载这个应用啊，让它去生效，这一步是真正发挥作用的啊，那一行代码它等同于之前原生小程序的。

什么样的原生小程序里面的这个方法调用APP方法调用OK，那看完这个以后呢，再带大家去回顾一下这个页面里边我们需要注意哪些事情，在这呢，有两个页面，我们先来看第一个index。好一个组件，一个入口文件，来这两个页面呢，我都给大家打开，你会发现每个页面里面是不是都有这个入口文件，然后我们先来看这个入口文件啊，在这呢，你会发现引入不用引入当前的组件，那这一个呢，是不用全局补获错误的钩子函数配置。好，这个呢，在VU里面咱们也有讲过啊，也有讲过，如果说不了解V用的同学呢，你最好是先去看一下VU，那看完这个以后呢，我们往下看这生成实例，挂载实例，它的作用。必不可少，等同于原生小程序GS文件里面的配置调用，哎，大家看log里面是不是也是这个做法呀？在这儿呢，细听同学可能已经发现了，来，我们看一下，我打开了三个入口文件，其中一个是整个项目的入口文件，而这两个呢，是相当于是我们某一个页面里面的入口文件，那他们跟全局的入口文件的区别是少了这一行代码。

那为什么，那刚才我也强调过这一行是不是强调当前的APP是代表应用啊，而这两个页面啊，我们也说了，页面它代表不了整个应用，只能说明是当前页面，所以呢，不需要当前这一行啊，这一行代码。好，了解了这个以后，来我们挑一个页面进来看一下，那里边的内容我们不需要看啊，到时候我们自己写，我可以给他收起来，我们一起来看。

这是把一个组件的三要素，哎，模板结构，行为样式呀，那它们分别等同于什么呢？我们页面里面的GS。哎，这个是GS，那这个呢叫微信SS，而下面这个呢。那不好意思啊，这说错了，这个叫什么微信ma下面这个呢，叫微信SS是不是都有来。好，那那这个时候呢，大家回顾一下啊，我们之前说了，在原生的小程序里边，它其实一共有四个重要的文件来，除了这三个以外呢，其实还有一个。那就是JS文件，哎这个JS文件呢，是针对页面的配置文件，哎，这个时候大家看在这它是不是有这个JS呀。来我们可以点开进来看一下，那这个呢，很明显是配置什么，我们之前也用过配置我们窗口的那个。文字的。那这个时候呢，我提醒大家啊，你们可以想一下，我们之前在原生的小程序里边。

咱们四个文件名是不是同名啊，哎，正是因为它这种设计呢，我们才能找到对应的文件，那现在在map v u里边，哎，有一点比较奇怪的是，这为什么叫mind杰呢。他不应该叫index吗？跟他同名才对啊。啊，要找到它的这个答案，我们需要去看一下这个Dis，大家看一下我还是找到对应的page，哎，我们随便找一个吧，就找这个代吧。来，我们看一下他打包以后，他把所有的文件名都给命名成什么了，这不是这四个文件吗？啊，都叫了密呢，这也就是说，如果说我们要自己起名啊，用这个阶层文件起名，必须要叫密呢，只有这样的话，它才能同名。有同学说，那这个是什么文件呀？

我可以给大家看一下啊，那这个呢，很明显是个未压缩的文件，然后呢，我们去看一下这个密微信嘛。你看这个是压缩文件，这个呢，其实跟我们H5的页面特别像啊，特别像，那这个呢，是真正打包上线要用的文件，压缩文件，而上面这个是对当前这个压缩文件的一个说明文件，也就是说真正报错提示，哎，是根据它来提示。好了解了这些以后，那我们把所有的文件关掉，那地址呢，我们也给它删了吧，因为这是它默认打包的文件啊，然后呢，Src我们也可以给它删掉来。嗯，右键delete，好，现在清空了src，那下节课呢，我们就去自己手写一个map view的一个初始化项目，那这节课呢，我们先讲到这里。