04. 尚硅谷_mpVue_主页面静态页面完成.avi原创

好，我们接着上一节课来讲，那么在讲之前呢，我要说一句啊，我发现有的同学到现在呢，不理解我们启动这个n PM start，哎，它是用来干什么的，那首先得说一下，你最终你的项目要部署到小程序的环境。他那个读的是不是Dis文件下面内容啊，那这个Dis上来是不是没有啊，哎，那就是要说到当我们启动n PM start的时候，他会帮我们去打包src下边的原文件到Dis的下边啊，只有他帮我们打包了以后，我们的项目是不是才能在小程序的环境里边运行啊，哎，这是第一个作用，那再有就是比如说啊，当我修改了这里边的某些内容，我一按CTRLS，它下面是不是又自动的帮我们，哎，打包了编译了。那这样的话呢，我们就能看到实时的效果，好，那这是启动这个n PM start的作用，哎，可能有的同学联想到VIVO里面，当我们一启动n PM start，它是不是会自动帮我们打开浏览器啊。

哎，有的同学就纳闷了，那现在他为什么不打开呢？你想啊，就算帮你打开了浏览器，你觉得你能看到小程序的效果吗？一个环境是浏览器，一个环境呢是小程序，这是不一样的，所以说打开浏览器是毫无意义的，哎在这儿呢，是不会打开的，是不会打开的，好，那说完这个以后呢，接下来呢，我们开始去写我们的这个主页面。写了个主页面，OK，那写主页面的话，这个我们并不陌生，我们先把这些没用的呢，哎，删掉它，首先我们是不需要一个image标签啊好，那在这呢，可能有同学上来又去写这个image，那这个image的话呢，它。

是小程序里边是不是提供的一个图片组件啊。啊在这呢，其实也能用啊，也能用，但是我要说一下，你用map view开发的话，你最好是用天近我们原生啊H5的这些东西去写，等什么时候用小程序提供的组件呢，等你原生的时间起来不方便的时候，你再用它，就是最好不要哄着用啊，这样的话容易搞混了。比如说那个后期我们是不是有个龙播图叫sweper啊，那个时候呢，你可以用小程序的那个是不是比较方便一点，在这儿呢，我们就用原声的去写，那这呢就要换成image，再往下呢，我们来个标签，比如说叫它hello map，那再往下呢给一个div，那这个div里边呢，比如说我们给他来一个P标签吧，这个呢叫开启小程序。之旅对吧？OK，那这些东西整完了以后，咱是不是缺一张图片呀。

圈一张图片，那来到我们的项目里边啊，来到我们的项目里边。在我原来的项目里边打开，我去找一个东西，这儿是不是有个图片啊，啊，这下面呢，是我们之前用到过的所有的图片，那这个时候大家可以看一下我的图片是不是放到static下边了，就静态资源下边来就放到这个下边，我放在这儿的目的呢，是我通过根目的去找他的话比较方便，哎，比较方便，其实呢，你也可以放到哪，放到这个src下边，哎，都可以啊，都可以，那现在呢，我还是放到哪，放到static下边，OK，那这些图片进来了以后呢，我去找一个我们之前测试的图片叫index下边。有，所以呢，在这儿我可以这样写，跟路径下边的static下边，哎，Image下边D下边的点GPGCTRLS1保存来到我们当前的项目，哎，这些东西是不是就进来了，OK，那架子搭好了以后呢，我们开始去给它命名一些，哎，Class类class，那这个呢，还是按照我们以前的规范。

我们叫它index container，那再往下呢，这个class叫它index image吧，或者是这来个呃下划线，诶下划线image好，那这个呢，Class之后呢，我们是不是在这会写一个用户名啊，那再往下，我记得我们当时这是叫go，哎，Study没有问题，那这些类名命名好了以后，我们是不是可以去写它对应的一些样式啊，写样式那首先呢，我们。要明确一个，哎东西就是说写样式是不是还是在当前这个view组件里边，只不过是需要写在style标签里边上来，第一个我们是不是要写最外边的容器啊，哎，之前呢，讲原生小程序呢，也给大家说到过，小程序里边特别推荐使用什么布局啊。

哎，Flex布局Le局，那flex布局在它这的兼容，呃，在它这儿的应用呢，比较广泛啊，用起来特别方便，所以呢，我在这儿上来还是display flex，因为它是一个纵向布局，所以呢flex column。是为ma。OK，没有问题，CTRLS1保存，哎，其实看上去没有什么明显的变化，对吧？哎，呃，重点是我们是不是要把要让这个内容居中啊，所以呢，在这啊it center再保存。他们是不是就到中间了呀，那接下来我们去设置一下这个图片啊，分别设置一下他们的样式，OK，那我直接去写这儿呢，有个叫index image对吧，那在这我记得我们之前设的是宽，诶应该是这呢，应该是200RX，高呢也是200RPX那。

现在说一下，在web STEM里面，它是不认识这个RPX的啊，所以呢，有个高亮的这个红线去提示，如果说你看着不舒服的话，你可以干嘛可以呢，把它关掉啊，把它关掉啊，就算不关的话，它也也不是报错啊，也不是说会我们写错了。OK，那宽高完了以后，我们要让它变成圆的，所以这应该是啊，Borderer，我们来100RPXOK，然后呢，给他一个上下的什么Mar，诶。那这儿呢，我们记得当时是120PX，那左右呢为零，OK来看一下来是不是出来了，那接下来我们再往下看，哎，再往下看，再往下看是不是就是那个P标签里边的那个文字啊，也说我们那个用户名，我们叫他什么username。

哎，Your name这儿首先呃，我们得设置一个它字体的大小，对吧，字体的大小还得加粗，哎，那在这写一下吧，Fo size 42PX，然后呢，Fo bit fo，还有一个什么上下的也是外边距啊，那在这儿呢，100RPX左右为零。来我们看一下，OK，没有问题，那紧接着再往下就是下边这个了，开启小程序之旅，首先呢，它叫什么go study对吧？啊在这呢，有一个，呃，诶这应该是Y，我记得没错，应该是220RPX对吧？220RPX以后呢，我们还有啥呢？再来一个高度高，你比如说来个80RPX，那肯定少不了一个东西叫border啊，E rpx so类，然后呢，井号11CTRLS，保存一下我们看。

好，这个边框是不出来了，那为什么会有这样，是不是字体太大了，哎，字体太大了，那这个时候呢，我们去设置一下，比如fo size，那在这呢，我们可以来24R PX，首先呢，水平垂直居中让字体，那这个横高是不是应该是80RPX，然后text什么center。OK，来是不是集中了没有问题，然后让这个棱角哎，再圆一点，那也是说给他呢，整一个border radiOS，我们来一个10RPX，让它圆滑一点。好，没有问题，那基本的一个结构以及样式写完了，接下来是不是差一个背景色啊，差一个背景色好，来再回顾一下，我要设整个背景色。

给他设行吗？哎，不行啊，这个时候呢，大家已经想起来了，我们是不是得给这个page去设置啊，哎，设置呃叫background，那这个颜色的话呢，我们去哪取呢？去这个src下面，刚刚我们是不是设置过它这个颜色，哎是不是就是这个。没问题，那我们把这个颜色呢，哎给它贴过来，来再来看一下，哎是不是就充满了呀，好，那主页的一个，哎静态页面呢，我们已经写完了，那这节课呢，我们就到这里。