app.js
app.js中包含了小程序的各种原生生命周期方法，如onLaunch、onShow等等。而在mpvue中，它使用了一个简单的Vue组件App.vue来实现等价的功能。我们在这个App.vue组件中可以编写小程序的生命周期方法（通常使用Vue的生命周期方法，但也兼容原生的生命周期方法），也可以在其中加入小程序的全局样式：
接着，这个App.vue组件被src/main.js引入并被设置了一个mpType的属性值，其值为app。这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值。引入这个App.vue组件后，会用它作为参数来创建一个Vue的实例，并调用$mount()方法加载。下面是这个过程的关键代码：
首页、以及其他页面
每个小程序都需要至少有一个页面，第一个展示的页面被叫做首页。因为前面已经把所有的页面代码都删完了，所以我们现在要新建一个首页。在src/pages目录下，我们新建一个名为index的子目录，然后在该子目录下，新建2个文件：一个用于实现页面主体功能的index.vue组件，另一个则用于将这个页面组件生成Vue实例并加载的main.js。以后的每一个mpvue页面组件都会拥有这样的结构。
然后在main.js中编写如下代码，非常简单的一段代码，它的功能是引入index.vue并创建Vue实例：
当然了，你也可以像在src/main.js中一样去导出一个页面级别的配置，因为小程序的每个页面都可以有一些单独的配置：
接着，我们需要实现index.vue页面组件，它的写法是最典型的Vue组件写法。
可以看到，这个组件完全看不到小程序写法的影子，而是全部由Vue开发Web应用的写法来完成：数据绑定、事件处理、scoped局部样式、以及使用HTML标签来构建界面。这样最大化的保持和网页应用开发一致，减少了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了降低迁移成本的可能。
模板部分我们通常可以用HTML标签来写，比如div、span等，它们会在编译的时候被自动转换成小程序的原生组件view、text之类；而那些小程序特有的组件如swiper、rich-text等，可以直接在模板中使用。
在原生小程序的页面（Page）中包含了很多页面的生命周期方法，如onLoad、onUnload、onShow、onHide、onPullDownRefresh等等，mpvue中推荐使用Vue组件生命周期方法，而像onPullDownRefresh、onReachBottom这类特殊功能的生命周期则需直接使用原生的。
回头再来看，当我们实现了这个index.vue页面组件后，其实还缺最后一个步骤，就是需要将这个页面组件指定为首页。如果我们的小程序只有一个页面的话，其实也可以省略这一步，因为mpvue会自动将src/pages目录下的页面组件路径添加到最终编译出来的小程序配置文件中去：
但是，大多数情况下我们的小程序会由很多个页面组成，在src/pages目录下编写多个页面组件后，mpvue也会自动把它们都添加进配置文件，但是由于小程序有一个机制：
配置文件中pages数组里的第一个page路径会被当做是首页
如果你期望的首页组件并没有被mpvue添加到第一个路径的话，就不会被当做首页显示。比如有多个页面，并在dist/app.json里生成的是下面的序列，则第一个pages/articles/main页面会被当做首页：
为了解决这种情况，我们需要显式的去指定首页。可以在src/main.js的配置里，加入这样一行配置信息：
注意：以上配置中指定为首页的路径前面有个^符号。
加入这行配置之后，pages/index/main总是会在最终生成的dist/app.json中排在第一个位置，成为首页。
3、mpvue / Vue的重要功能
既然mpvue是基于Vue的，那么就没有理由不进一步学习一下Vue最核心的东西：组件。组件系统是Vue应用开发中最具价值的特性之一，在前文中其实我们就已经有在使用组件了，比如App.vue和首页index.vue就是两个Vue组件。
组件是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树，若干的小组件可以聚合成一个完整的界面：
一个好的组件系统一定会有这些特点：封装性、复用性、扩展性。对于Vue的组件来说，这几点都算是实现的比较的优秀的。
组件的封装性
Vue组件的写法可以避免将属于一个独立逻辑单位的代码散落在各处，可以将界面（DOM）、样式（CSS）、行为（JS）三部分的代码很好的组织在一起（推荐的实践是使用.vue文件）。在设计编写一个组件时，我们要记住的原则就是：
避免向外部暴露过多的东西，只暴露必要的外部交互接口（组件属性、事件、方法等）。
下面我们来在原先的代码基础上，创建一个简单的按钮点击计数器组件，它将实现的功能是：点击按钮并展示已点击按钮次数、点击清零按钮实现点击次数的归零。在src/components目录下，新建一个click-counter.vue组件文件，并编写如下代码：
编写完这个组件后，我们来尝试在首页组件src/pages/index/index.vue文件中使用它：
完成上面两个步骤后，记得重新运行一下命令行npm run dev（注意点：新增文件必须重新
本文地址：IT问答频道 https://www.hkm168.com/itwenda/942089_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
