03. 尚硅谷_Mpvue_mpvue项目初始化搭建

好，来，我们继续那上一节课呢，给大家介绍了一下这个map脚手架初始化项目，如果初始化，那以及它里边一些相关文件的说明，重点呢，我们去说了一下src。下边哎，主要文件的作用，那其实呢，他之前src下面还有很多相关的文件啊，那都是他初始化项目用的一些文件。对于我们来说意义不大，所以呢我都把它删了，那这节课呢，我们就一点一点的自己去写一下这个初始化的项目。首先呢，来到src下边，我们需要先去创建一个app.view也就是说整个应用的一个组件右键我去创建一个文件，在这儿呢和跟大家说一下啊，我呢是用我自己配置一个模板语法去创建啊，主要是为了方便一回车大家看。那这个一个组件的三要素啊，都在里边了，那上节课呢，我们说过在app.v这个应用的主主件里边，我们是不需要什么，不需要这个模板结构的，所以呢，我把它删掉。

那嗯，这一个是行为，一个是样式，那这个呢代表的是什么呀？这个呢代表的是对稍等app.gs对吧？在这呢代表的是APP点微信SS，在这呢，大家看一下啊，我之前这个模板语法里边呢，我是上来就让他用了stars，所以呢我们得需要去下载安装stes以及stars对应的loader，刚才呢，为了节省时间呢，我已经安装过这两个包了，我相信大家应该也是会安装的啊，你只需要在当前的项目下面执行n PM install，然后呢装对应的包就OK啊就OK。好，那知道了这个以后，我们接着往下来看。

哎，有了组建以后呢，我们还需要创建一个当前项目的入口文件，在这呢，第一步我们需要先去引入为用，然后呢，引入啊当前这个创建的app.v。那现在这个飘红呢，是因为什么呢？是因为啊ES link它语法检查的问题，不是说我们写错了，在这呢，为了方便，在刚开始开发的时候呢，我会选择把ESD呢给它关掉啊，让他不要去检查我的这些文件。嗯，ES令的对于我们开发人员来说有好处，就是说他能帮我们去检查我们的语法，但是呢，它里边有一些要求比较苛刻一点啊，比如说我没加回车呀，或者没加空格呀，都会报错，所以呢，前期我们可以把它写关掉啊，等他写完了让他再来检查都OK，好把这个写完以后来把它关掉，那回到这打开那个飘红是不是就没有了，没有了以后，那接着往下来写，上节课呢，我们看到的是在这里边呢，有一个V点，哎，Prototype就是它的原型上有个什么pro啊，嗯，然后呢。

Tip，嗯，等于false，那这一步的作用呢？嗯，这应该是什么？应该是pro，这一步的作用是去，嗯关闭啊，没有开发中的，嗯，一些提示功能，那再往下呢，还有一步很重要的，我上节课也强调了啊，我们一定要去声明，嗯，当前的组件为整个应用啊，写的话呢，那就是app.map。嗯，Type等于APP，那这一步千万不要丢了啊，那紧接着再往下，那就是生成嗯，当前应用的来实例，来cost一个APP等于另一个不用，然后呢，去把它放进来，生成了以后，那下一步那就是挂载当前应用的实例app.dollar服Mo。

那这样的话呢，我们这个文件就写完了，好写完了这些以后呢，我们再想想，我们全局一定还有什么文件。哎，这个时候大家应该有同学能想起来，我们全局必须还应该有一个什么叫APP点杰森，在这呢，大家要注意啊，这个配置文件它的首字母是小写，在这里边呢，它是一个阶层的对象，首先有一个必不可少的叫pages，那这个呢是用来干嘛的呢？哎，原始小程序里面我们也讲过，它呢是用来去设置页面的路径的，那现在呢，因为没有页面，所以呢，在这儿呢，我先放一个空的数组，至于说为什么它是数组呢？因为在这里面我们一定是会有多个页面的。

啊，把这个也写完以后，其实呢，全局。这些文件就够了，那接下来我们就写一个页面，为了我们的啊文件更清晰呢，我会先去创建一些文件夹，比如说先创建一个pages，它呢用来管理我们所有的页面，在它下面呢，我再去创建一个文件啊，比如说叫first view。那这个呢，代表了我们接下来写项目的第一个来。页面在它下边呢，我们去创建一下这个页面里边必须得些文件啊，首先呢，要有一个页面对应的组件。在这呢，我给大家起名叫index，待会儿呢给大家解释为什么这样起名字啊，那在这里面我们先简单去表示一下index组件。

好，写完这些以后，那这个页面组件有了，它就能生效吗？不是这样的，哎，其实呢，它还需要一个叫什么命点GS文件，那这个呢是用来注册啊，当前页面的那套路呢，是固定的，先引入为有，紧接呢引入当前啊项目的这个组建好，然后呢再给大家写一遍啊，这的固定套路是生成当前页面的实例啊cost，一个index等于另一个view，然后呢，把左键丢进来，那紧接着那就是一样的套路，我们去干嘛呢啊，去挂载当前页面的实例index.dollar amount。

那这样的话就写完了，而且呢，接下来我们每写一个页面，其实都少不了这个文件，这因为每个页面都需要它，而里边的套路都是固定的，所以呢，大家看我以后每创建一个页面，我都会这样去写，我先创建个文件夹，文件夹的名字跟页面要表达的内容一致，然后里边呢，对应的组件我都叫它index，而入口文件呢，都叫命夹，那这样的话，其实这个文件我们再也不用动了，每次都引入成index不就可以了吗？哎，省事一点啊，所以呢，这也就是我为什么叫index的原因。那写完这个以后，大家再看在这个页面，你说我需不需要去写这一步呢。哎，注意啊，上节课我们也说了，在这呢是不需要写的，因为当前的这个组件，它只代表当前页面，它代表不了整个应用。

好，那写完这些以后，我们想要看一下我们当前页面的效果，怎么办呢？我们需要去启动一下当前的项目，N PM start启动之后呢，我们能看到一些错误啊。好，这边让他重新去编译一下。那这边编译完了，我们去刷新一下，我随便点个地方，大家看这是不是有个D了，那看到第以后来来到我们的开发工具去看一下效果，这个时候我去编译一下，哎，大家看这怎么还是之前的那个页面，那这样的话你就要打开调试器看看有没有错误了。哎，果然这有一个报错，其实呢，当前我们的项目根本没有编译，就是be出错了，所以呢，它还是缓存的上一个项目的哎效果，那这是啥意思呢？他说未找到这个定义的pages，哎，那来我们过来看一下咱们的pages有吗？

在这儿有，但是里面没有页面的路径，那也就是说我上来根本不知道要加在哪个页面。对吧。啊，在这呢，故意挖这个坑，是想让大家去对比一下，在我们原生的小程序里边，咱们在开发工具里边，哎，每次你比如说我们右键去建一个配件，它是不是会自动的帮我们把路径写入到这个数组里啊，那现在因为在map view里边哎没有写入，所以呢需要我们自己写入。在这呢，这个路径呢，就是以src为参照物，它相当于是我们当前开发项目的根目录，所以呢，我们直接让他去找下面的pages下边的啊first没那紧接着。我们应该选什么呢？大家想一下，之前在原生的小程序里面，我们这应该是把跟这个文件夹一般是同名的呀。

那现在至于说要写什么，你不能乱写，哎，你得看你打包了以后，你下面这四个文件叫什么，很明显是不是都叫M减S啊mean呢呀，所以呢，在这我们应该让人家去下边找什么，找所有的min文件。啊，那写完了以后，我们需要重新去打包一下我们的项目。为什么要重新打包呢？在这跟大家说一下，在map view这个框架里边，有一点比较坑的是，你每新创建一个项目。每新创建一个页面，你都得重新去编译打包，只有这样它才能加载，那这个时候大家看我们自己写的项目是不是就OK了呀？好，那这节课呢，我们就讲到这里。